@pajohns/flowbite-svelte 0.1.0

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

@@ -0,0 +1,321 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../../theme/themeUtils";
+export declare const checkbox: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        gray: {
+            base: string;
+        };
+        red: {
+            base: string;
+        };
+        orange: {
+            base: string;
+        };
+        amber: {
+            base: string;
+        };
+        yellow: {
+            base: string;
+        };
+        lime: {
+            base: string;
+        };
+        green: {
+            base: string;
+        };
+        emerald: {
+            base: string;
+        };
+        teal: {
+            base: string;
+        };
+        cyan: {
+            base: string;
+        };
+        sky: {
+            base: string;
+        };
+        blue: {
+            base: string;
+        };
+        indigo: {
+            base: string;
+        };
+        violet: {
+            base: string;
+        };
+        purple: {
+            base: string;
+        };
+        fuchsia: {
+            base: string;
+        };
+        pink: {
+            base: string;
+        };
+        rose: {
+            base: string;
+        };
+    };
+    tinted: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    custom: {
+        true: {
+            base: string;
+        };
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+    };
+    inline: {
+        true: {
+            div: string;
+            false: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+            div: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    div: string;
+}, undefined, {
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        gray: {
+            base: string;
+        };
+        red: {
+            base: string;
+        };
+        orange: {
+            base: string;
+        };
+        amber: {
+            base: string;
+        };
+        yellow: {
+            base: string;
+        };
+        lime: {
+            base: string;
+        };
+        green: {
+            base: string;
+        };
+        emerald: {
+            base: string;
+        };
+        teal: {
+            base: string;
+        };
+        cyan: {
+            base: string;
+        };
+        sky: {
+            base: string;
+        };
+        blue: {
+            base: string;
+        };
+        indigo: {
+            base: string;
+        };
+        violet: {
+            base: string;
+        };
+        purple: {
+            base: string;
+        };
+        fuchsia: {
+            base: string;
+        };
+        pink: {
+            base: string;
+        };
+        rose: {
+            base: string;
+        };
+    };
+    tinted: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    custom: {
+        true: {
+            base: string;
+        };
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+    };
+    inline: {
+        true: {
+            div: string;
+            false: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+            div: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    div: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        gray: {
+            base: string;
+        };
+        red: {
+            base: string;
+        };
+        orange: {
+            base: string;
+        };
+        amber: {
+            base: string;
+        };
+        yellow: {
+            base: string;
+        };
+        lime: {
+            base: string;
+        };
+        green: {
+            base: string;
+        };
+        emerald: {
+            base: string;
+        };
+        teal: {
+            base: string;
+        };
+        cyan: {
+            base: string;
+        };
+        sky: {
+            base: string;
+        };
+        blue: {
+            base: string;
+        };
+        indigo: {
+            base: string;
+        };
+        violet: {
+            base: string;
+        };
+        purple: {
+            base: string;
+        };
+        fuchsia: {
+            base: string;
+        };
+        pink: {
+            base: string;
+        };
+        rose: {
+            base: string;
+        };
+    };
+    tinted: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    custom: {
+        true: {
+            base: string;
+        };
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+    };
+    inline: {
+        true: {
+            div: string;
+            false: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+            div: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    div: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CheckboxVariants = Omit<VariantProps<typeof checkbox> & Classes<typeof checkbox>, "disabled">;
+export declare const checkboxButton: import("tailwind-variants").TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+    checked: {
+        true: string;
+    };
+}, undefined, "", {
+    inline: {
+        true: string;
+        false: string;
+    };
+    checked: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+    checked: {
+        true: string;
+    };
+}, undefined, "", unknown, unknown, undefined>>;
+export type CheckboxButtonVariants = VariantProps<typeof checkboxButton>;

package/dist/forms/checkbox/theme.js

@@ -0,0 +1,114 @@
+import { tv } from "tailwind-variants";
+export const checkbox = tv({
+    slots: {
+        base: "w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 rounded-sm",
+        div: "flex items-center"
+    },
+    variants: {
+        color: {
+            // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+            primary: {
+                base: "text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"
+            },
+            secondary: {
+                base: "text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600"
+            },
+            gray: {
+                base: "text-gray-600 focus:ring-gray-600 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
+            },
+            red: {
+                base: "text-red-600 focus:ring-red-600 dark:ring-offset-red-600 dark:focus:ring-red-600"
+            },
+            orange: {
+                base: "text-orange-600 focus:ring-orange-600 dark:ring-offset-orange-600 dark:focus:ring-orange-600"
+            },
+            amber: {
+                base: "text-amber-600 focus:ring-amber-600 dark:ring-offset-amber-600 dark:focus:ring-amber-600"
+            },
+            yellow: {
+                base: "text-yellow-400 focus:ring-yellow-400 dark:ring-offset-yellow-400 dark:focus:ring-yellow-400"
+            },
+            lime: {
+                base: "text-lime-700 focus:ring-lime-700 dark:ring-offset-lime-700 dark:focus:ring-lime-700"
+            },
+            green: {
+                base: "text-green-600 focus:ring-green-600 dark:ring-offset-green-600 dark:focus:ring-green-600"
+            },
+            emerald: {
+                base: "text-emerald-600 focus:ring-emerald-600 dark:ring-offset-emerald-600 dark:focus:ring-emerald-600"
+            },
+            teal: {
+                base: "text-teal-600 focus:ring-teal-600 dark:ring-offset-teal-600 dark:focus:ring-teal-600"
+            },
+            cyan: {
+                base: "text-cyan-600 focus:ring-cyan-600 dark:ring-offset-cyan-600 dark:focus:ring-cyan-600"
+            },
+            sky: {
+                base: "text-sky-600 focus:ring-sky-600 dark:ring-offset-sky-600 dark:focus:ring-sky-600"
+            },
+            blue: {
+                base: "text-blue-700 focus:ring-blue-600 dark:ring-offset-blue-700 dark:focus:ring-blue-700"
+            },
+            indigo: {
+                base: "text-indigo-700 focus:ring-indigo-700 dark:ring-offset-indigo-700 dark:focus:ring-indigo-700"
+            },
+            violet: {
+                base: "text-violet-600 focus:ring-violet-600 dark:ring-offset-violet-600 dark:focus:ring-violet-600"
+            },
+            purple: {
+                base: "text-purple-600 focus:ring-purple-600 dark:ring-offset-purple-600 dark:focus:ring-purple-600"
+            },
+            fuchsia: {
+                base: "text-fuchsia-600 focus:ring-fuchsia-600 dark:ring-offset-fuchsia-600 dark:focus:ring-fuchsia-600"
+            },
+            pink: {
+                base: "text-pink-600 focus:ring-pink-600 dark:ring-offset-pink-600 dark:focus:ring-pink-600"
+            },
+            rose: {
+                base: "text-rose-600 focus:ring-rose-600 dark:ring-offset-rose-600 dark:focus:ring-rose-600"
+            }
+        },
+        tinted: {
+            true: { base: "dark:bg-gray-600 dark:border-gray-500" },
+            false: { base: "dark:bg-gray-700 dark:border-gray-600" }
+        },
+        custom: {
+            true: { base: "sr-only peer" }
+        },
+        rounded: {
+            true: { base: "rounded-sm" }
+        },
+        inline: {
+            true: {
+                div: "inline-flex",
+                false: "flex items-center"
+            }
+        },
+        disabled: {
+            true: {
+                base: "cursor-not-allowed opacity-50 bg-gray-200 border-gray-300",
+                div: "cursor-not-allowed opacity-70"
+            },
+            false: {}
+        }
+    },
+    defaultVariants: {
+        color: "primary",
+        disabled: false
+    }
+});
+export const checkboxButton = tv({
+    base: "",
+    variants: {
+        inline: {
+            true: "inline-flex",
+            false: "flex"
+        },
+        checked: {
+            true: "outline-4 outline-green-500"
+        }
+    },
+    defaultVariants: {
+        inline: true
+    }
+});

package/dist/forms/dropzone/Dropzone.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type { DragEventHandler, ChangeEventHandler } from "svelte/elements";
+  import { dropzone } from "./theme";
+  import clsx from "clsx";
+  import type { DropzoneProps } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
+
+  type HTMLInputElementWithFiles = HTMLInputElement & { files: FileList | null };
+
+  let { children, files = $bindable<FileList | null>(), class: className, onDrop, onDragOver, onChange, ...restProps }: DropzoneProps = $props();
+
+  const theme = $derived(getTheme("dropzone"));
+
+  let inputElement: HTMLInputElement;
+
+  const handleDrop: DragEventHandler<HTMLLabelElement> = function (this: Window, event) {
+    event.preventDefault();
+
+    if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
+      files = event.dataTransfer.files;
+      if (inputElement) {
+        inputElement.files = event.dataTransfer.files;
+      }
+    }
+
+    if (onDrop) {
+      onDrop.call(this, event);
+    }
+  };
+
+  const handleDragOver: DragEventHandler<HTMLLabelElement> = function (this: Window, event) {
+    event.preventDefault();
+    if (onDragOver) {
+      onDragOver.call(this, event);
+    }
+  };
+
+  const handleChange: ChangeEventHandler<HTMLInputElementWithFiles> = function (this: Window, event) {
+    if (onChange) {
+      onChange.call(this, event);
+    }
+  };
+</script>
+
+<label class={dropzone({ class: clsx(theme, className) })} ondrop={handleDrop} ondragover={handleDragOver}>
+  {@render children()}
+
+  <input {...restProps} bind:files bind:this={inputElement} onchange={handleChange} type="file" class="hidden" />
+</label>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L802)
+## Props
+@prop children
+@prop files = $bindable<FileList | null>()
+@prop class: className
+@prop onDrop
+@prop onDragOver
+@prop onChange
+@prop ...restProps
+-->

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

@@ -0,0 +1,17 @@
+import type { DropzoneProps } from "../..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L802)
+ * ## Props
+ * @prop children
+ * @prop files = $bindable<FileList | null>()
+ * @prop class: className
+ * @prop onDrop
+ * @prop onDragOver
+ * @prop onChange
+ * @prop ...restProps
+ */
+declare const Dropzone: import("svelte").Component<DropzoneProps, {}, "files">;
+type Dropzone = ReturnType<typeof Dropzone>;
+export default Dropzone;

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

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

package/dist/forms/dropzone/index.js

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

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/fileupload/Fileupload.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { fileupload } from "./theme";
+  import clsx from "clsx";
+  import type { FileuploadProps } from "../..";
+  import CloseButton from "../../utils/CloseButton.svelte";
+  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { createDismissableContext } from "../../utils/dismissable";
+  import { untrack } from "svelte";
+
+  let {
+    files = $bindable(),
+    size = "md",
+    clearable = false,
+    elementRef = $bindable(),
+    class: className,
+    classes,
+    clearableSvgClass,
+    clearableColor = "none",
+    clearableClass,
+    clearableOnClick,
+    wrapperClass,
+    ...restProps
+  }: FileuploadProps = $props();
+
+  warnThemeDeprecation(
+    "Fileupload",
+    untrack(() => ({ wrapperClass, clearableClass, clearableSvgClass })),
+    { wrapperClass: "wrapper", clearableClass: "close", clearableSvgClass: "svg" }
+  );
+
+  const styling = $derived(classes ?? { wrapper: wrapperClass, close: clearableClass, svg: clearableSvgClass });
+
+  const theme = $derived(getTheme("fileupload"));
+
+  const { base, wrapper, close } = fileupload();
+
+  const clearAll = () => {
+    if (elementRef) {
+      elementRef.value = "";
+      files = undefined;
+    }
+    if (clearableOnClick) clearableOnClick();
+  };
+
+  createDismissableContext(clearAll);
+</script>
+
+<div class={wrapper({ class: clsx(theme?.wrapper, styling.wrapper) })}>
+  <input type="file" bind:files bind:this={elementRef} {...restProps} class={base({ size, class: clsx(theme?.base, className) })} />
+  {#if files && files.length > 0 && clearable}
+    <CloseButton class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear selected files" svgClass={clsx(styling.svg)} />
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L811)
+## Props
+@prop files = $bindable()
+@prop size = "md"
+@prop clearable = false
+@prop elementRef = $bindable()
+@prop class: className
+@prop classes
+@prop clearableSvgClass
+@prop clearableColor = "none"
+@prop clearableClass
+@prop clearableOnClick
+@prop wrapperClass
+@prop ...restProps
+-->

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

@@ -0,0 +1,22 @@
+import type { FileuploadProps } from "../..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L811)
+ * ## Props
+ * @prop files = $bindable()
+ * @prop size = "md"
+ * @prop clearable = false
+ * @prop elementRef = $bindable()
+ * @prop class: className
+ * @prop classes
+ * @prop clearableSvgClass
+ * @prop clearableColor = "none"
+ * @prop clearableClass
+ * @prop clearableOnClick
+ * @prop wrapperClass
+ * @prop ...restProps
+ */
+declare const Fileupload: import("svelte").Component<FileuploadProps, {}, "elementRef" | "files">;
+type Fileupload = ReturnType<typeof Fileupload>;
+export default Fileupload;

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

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

package/dist/forms/fileupload/index.js

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

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

@@ -0,0 +1,55 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../../theme/themeUtils";
+export type FileuploadViariants = VariantProps<typeof fileupload> & Classes<typeof fileupload>;
+export declare const fileupload: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    close: string;
+    svg: string;
+}, undefined, {
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    close: string;
+    svg: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    close: string;
+    svg: string;
+}, undefined, unknown, unknown, undefined>>;