@pajohns/flowbite-svelte 0.1.0

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

@@ -0,0 +1,290 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../../theme/themeUtils";
+export type RadioVariants = VariantProps<typeof radio> & Classes<typeof radio>;
+export declare const radio: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            input: string;
+        };
+        secondary: {
+            input: string;
+        };
+        gray: {
+            input: string;
+        };
+        red: {
+            input: string;
+        };
+        orange: {
+            input: string;
+        };
+        amber: {
+            input: string;
+        };
+        yellow: {
+            input: string;
+        };
+        lime: {
+            input: string;
+        };
+        green: {
+            input: string;
+        };
+        emerald: {
+            input: string;
+        };
+        teal: {
+            input: string;
+        };
+        cyan: {
+            input: string;
+        };
+        sky: {
+            input: string;
+        };
+        blue: {
+            input: string;
+        };
+        indigo: {
+            input: string;
+        };
+        violet: {
+            input: string;
+        };
+        purple: {
+            input: string;
+        };
+        fuchsia: {
+            input: string;
+        };
+        pink: {
+            input: string;
+        };
+        rose: {
+            input: string;
+        };
+    };
+    tinted: {
+        true: {
+            input: string;
+        };
+        false: {
+            input: string;
+        };
+    };
+    custom: {
+        true: {
+            input: string;
+        };
+        false: {
+            input: string;
+        };
+    };
+    inline: {
+        true: {
+            label: string;
+        };
+        false: {
+            label: string;
+        };
+    };
+}, {
+    input: string;
+    label: string;
+}, undefined, {
+    color: {
+        primary: {
+            input: string;
+        };
+        secondary: {
+            input: string;
+        };
+        gray: {
+            input: string;
+        };
+        red: {
+            input: string;
+        };
+        orange: {
+            input: string;
+        };
+        amber: {
+            input: string;
+        };
+        yellow: {
+            input: string;
+        };
+        lime: {
+            input: string;
+        };
+        green: {
+            input: string;
+        };
+        emerald: {
+            input: string;
+        };
+        teal: {
+            input: string;
+        };
+        cyan: {
+            input: string;
+        };
+        sky: {
+            input: string;
+        };
+        blue: {
+            input: string;
+        };
+        indigo: {
+            input: string;
+        };
+        violet: {
+            input: string;
+        };
+        purple: {
+            input: string;
+        };
+        fuchsia: {
+            input: string;
+        };
+        pink: {
+            input: string;
+        };
+        rose: {
+            input: string;
+        };
+    };
+    tinted: {
+        true: {
+            input: string;
+        };
+        false: {
+            input: string;
+        };
+    };
+    custom: {
+        true: {
+            input: string;
+        };
+        false: {
+            input: string;
+        };
+    };
+    inline: {
+        true: {
+            label: string;
+        };
+        false: {
+            label: string;
+        };
+    };
+}, {
+    input: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            input: string;
+        };
+        secondary: {
+            input: string;
+        };
+        gray: {
+            input: string;
+        };
+        red: {
+            input: string;
+        };
+        orange: {
+            input: string;
+        };
+        amber: {
+            input: string;
+        };
+        yellow: {
+            input: string;
+        };
+        lime: {
+            input: string;
+        };
+        green: {
+            input: string;
+        };
+        emerald: {
+            input: string;
+        };
+        teal: {
+            input: string;
+        };
+        cyan: {
+            input: string;
+        };
+        sky: {
+            input: string;
+        };
+        blue: {
+            input: string;
+        };
+        indigo: {
+            input: string;
+        };
+        violet: {
+            input: string;
+        };
+        purple: {
+            input: string;
+        };
+        fuchsia: {
+            input: string;
+        };
+        pink: {
+            input: string;
+        };
+        rose: {
+            input: string;
+        };
+    };
+    tinted: {
+        true: {
+            input: string;
+        };
+        false: {
+            input: string;
+        };
+    };
+    custom: {
+        true: {
+            input: string;
+        };
+        false: {
+            input: string;
+        };
+    };
+    inline: {
+        true: {
+            label: string;
+        };
+        false: {
+            label: string;
+        };
+    };
+}, {
+    input: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const radioButton: import("tailwind-variants").TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+}, undefined, "", {
+    inline: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+}, undefined, "", unknown, unknown, undefined>>;

package/dist/forms/radio/theme.js

@@ -0,0 +1,95 @@
+import { tv } from "tailwind-variants";
+export const radio = tv({
+    slots: {
+        input: "flex items-center w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 mr-2",
+        label: "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: {
+                input: "text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"
+            },
+            secondary: {
+                input: "text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600"
+            },
+            gray: {
+                input: "text-gray-600 focus:ring-gray-500 dark:focus:ring-gray-600"
+            },
+            red: { input: "text-red-600 focus:ring-red-500 dark:focus:ring-red-600" },
+            orange: {
+                input: "text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600"
+            },
+            amber: {
+                input: "text-amber-600 focus:ring-amber-500 dark:focus:ring-amber-600"
+            },
+            yellow: {
+                input: "text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600"
+            },
+            lime: {
+                input: "text-lime-600 focus:ring-lime-500 dark:focus:ring-lime-600"
+            },
+            green: {
+                input: "text-green-600 focus:ring-green-500 dark:focus:ring-green-600"
+            },
+            emerald: {
+                input: "text-emerald-600 focus:ring-emerald-500 dark:focus:ring-emerald-600"
+            },
+            teal: {
+                input: "text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600"
+            },
+            cyan: {
+                input: "text-cyan-600 focus:ring-cyan-500 dark:focus:ring-cyan-600"
+            },
+            sky: { input: "text-sky-600 focus:ring-sky-500 dark:focus:ring-sky-600" },
+            blue: {
+                input: "text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600"
+            },
+            indigo: {
+                input: "text-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600"
+            },
+            violet: {
+                input: "text-violet-600 focus:ring-violet-500 dark:focus:ring-violet-600"
+            },
+            purple: {
+                input: "text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600"
+            },
+            fuchsia: {
+                input: "text-fuchsia-600 focus:ring-fuchsia-500 dark:focus:ring-fuchsia-600"
+            },
+            pink: {
+                input: "text-pink-600 focus:ring-pink-500 dark:focus:ring-pink-600"
+            },
+            rose: {
+                input: "text-rose-600 focus:ring-rose-500 dark:focus:ring-rose-600"
+            }
+        },
+        tinted: {
+            true: { input: "dark:bg-gray-600 dark:border-gray-500" },
+            false: { input: "dark:bg-gray-700 dark:border-gray-600" }
+        },
+        custom: {
+            true: { input: "sr-only peer" },
+            false: { input: "relative" }
+        },
+        inline: {
+            true: { label: "inline-flex" },
+            false: { label: "flex" }
+        }
+    },
+    defaultVariants: {
+        color: "primary"
+    }
+});
+export const radioButton = tv({
+    base: "",
+    variants: {
+        inline: {
+            true: "inline-flex",
+            false: "flex"
+        }
+    },
+    defaultVariants: {
+        inline: true
+    }
+});

package/dist/forms/range/Range.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { range } from "./theme";
+  import clsx from "clsx";
+  import type { RangeProps } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
+
+  let { value = $bindable(), appearance = "none", color = "blue", size = "md", inputClass, class: className, ...restProps }: RangeProps = $props();
+
+  const theme = $derived(getTheme("range"));
+  // remove inputClass in next major version
+  const inputCls = $derived(range({ appearance, color, size, class: clsx(theme, inputClass, className) }));
+</script>
+
+<input type="range" bind:value {...restProps} class={inputCls} />
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L934)
+## Props
+@prop value = $bindable()
+@prop appearance = "none"
+@prop color = "blue"
+@prop size = "md"
+@prop inputClass
+@prop class: className
+@prop ...restProps
+-->

package/dist/forms/range/Range.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { RangeProps } from "../..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L934)
+ * ## Props
+ * @prop value = $bindable()
+ * @prop appearance = "none"
+ * @prop color = "blue"
+ * @prop size = "md"
+ * @prop inputClass
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const Range: import("svelte").Component<RangeProps, {}, "value">;
+type Range = ReturnType<typeof Range>;
+export default Range;

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

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

package/dist/forms/range/index.js

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

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

@@ -0,0 +1,66 @@
+import { type VariantProps } from "tailwind-variants";
+export type RangeVariants = VariantProps<typeof range>;
+export declare const range: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    color: {
+        gray: string;
+        red: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    appearance: {
+        auto: string;
+        none: string;
+    };
+}, undefined, "w-full bg-gray-200 rounded-lg cursor-pointer dark:bg-gray-700", {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    color: {
+        gray: string;
+        red: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    appearance: {
+        auto: string;
+        none: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    color: {
+        gray: string;
+        red: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    appearance: {
+        auto: string;
+        none: string;
+    };
+}, undefined, "w-full bg-gray-200 rounded-lg cursor-pointer dark:bg-gray-700", unknown, unknown, undefined>>;

package/dist/forms/range/theme.js

@@ -0,0 +1,74 @@
+import { tv } from "tailwind-variants";
+export const range = tv({
+    base: "w-full bg-gray-200 rounded-lg cursor-pointer dark:bg-gray-700",
+    variants: {
+        size: {
+            sm: "h-1 range-sm",
+            md: "h-2",
+            lg: "h-3 range-lg"
+        },
+        color: {
+            // other colors do not work
+            gray: "",
+            red: "",
+            blue: "",
+            indigo: "",
+            violet: "",
+            purple: "",
+            fuchsia: "",
+            pink: "",
+            rose: ""
+        },
+        appearance: {
+            auto: "range accent-red-500",
+            none: "appearance-none"
+        }
+    },
+    compoundVariants: [
+        {
+            appearance: "auto",
+            color: "gray",
+            class: "accent-gray-500"
+        },
+        {
+            appearance: "auto",
+            color: "red",
+            class: "accent-red-500"
+        },
+        {
+            appearance: "auto",
+            color: "blue",
+            class: "accent-blue-500"
+        },
+        {
+            appearance: "auto",
+            color: "indigo",
+            class: "accent-indigo-500"
+        },
+        {
+            appearance: "auto",
+            color: "violet",
+            class: "accent-violet-500"
+        },
+        {
+            appearance: "auto",
+            color: "purple",
+            class: "accent-purple-500"
+        },
+        {
+            appearance: "auto",
+            color: "fuchsia",
+            class: "accent-fuchsia-500"
+        },
+        {
+            appearance: "auto",
+            color: "pink",
+            class: "accent-pink-500"
+        },
+        {
+            appearance: "auto",
+            color: "rose",
+            class: "accent-rose-500"
+        }
+    ]
+});

package/dist/forms/search/Search.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { search } from "./theme";
+  import clsx from "clsx";
+  import type { SearchProps } from "../..";
+  import CloseButton from "../../utils/CloseButton.svelte";
+  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { createDismissableContext } from "../../utils/dismissable";
+  import { untrack } from "svelte";
+
+  let {
+    children,
+    inputClass,
+    size,
+    placeholder = "Search",
+    value = $bindable(),
+    elementRef = $bindable(),
+    clearable = false,
+    clearableSvgClass,
+    clearableColor = "none",
+    clearableClass,
+    clearableOnClick,
+    class: className,
+    classes,
+    ...restProps
+  }: SearchProps = $props();
+
+  warnThemeDeprecation(
+    "Search",
+    untrack(() => ({ inputClass, clearableSvgClass, clearableClass })),
+    { inputClass: "input", clearableSvgClass: "svg", clearableClass: "close" }
+  );
+
+  const styling = $derived(classes ?? { input: inputClass, svg: clearableSvgClass, close: clearableClass });
+
+  const theme = $derived(getTheme("search"));
+
+  const { base, content, icon, close, input: inputCls, left } = $derived(search({ size }));
+
+  const clearAll = () => {
+    if (elementRef) {
+      elementRef.value = "";
+      value = undefined;
+    }
+    if (clearableOnClick) clearableOnClick();
+  };
+
+  createDismissableContext(clearAll);
+</script>
+
+<div class={base({ class: clsx(theme?.base, className) })}>
+  <div class={left({ class: clsx(theme?.left, classes?.left) })}>
+    <svg class={icon({ class: clsx(theme?.icon, classes?.icon) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
+    </svg>
+  </div>
+  <input type="search" bind:value bind:this={elementRef} class={inputCls({ class: clsx(theme?.input, styling.input) })} {placeholder} required {...restProps} />
+  {#if children}
+    <div class={content({ class: clsx(theme?.content, classes?.content) })}>
+      {@render children()}
+    </div>
+  {/if}
+  {#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}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L940)
+## Props
+@prop children
+@prop inputClass
+@prop size
+@prop placeholder = "Search"
+@prop value = $bindable()
+@prop elementRef = $bindable()
+@prop clearable = false
+@prop clearableSvgClass
+@prop clearableColor = "none"
+@prop clearableClass
+@prop clearableOnClick
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

package/dist/forms/search/Search.svelte.d.ts

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

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

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

package/dist/forms/search/index.js

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