flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/forms/radio-button/type.js

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

package/dist/forms/range/Range.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { range, type RangeProps as Props } from "./";
+
+  let { value = $bindable(), appearance = "none", color = "blue", rangeSize = "md", inputClass, ...restProps }: Props = $props();
+
+  const inputCls = $derived(range({ class: inputClass, appearance, color, size: rangeSize }));
+</script>
+
+<input type="range" bind:value {...restProps} class={inputCls} />
+
+<!--
+@component
+[Go to docs](https://preview.flowbite-svelte.com/)
+## Props
+@props: value: any = $bindable();
+@props:appearance: any = "none";
+@props:color: any = "blue";
+@props:rangeSize: any = "md";
+@props:inputClass: any;
+-->

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

@@ -0,0 +1,13 @@
+import { type RangeProps as Props } from "./";
+/**
+ * [Go to docs](https://preview.flowbite-svelte.com/)
+ * ## Props
+ * @props: value: any = $bindable();
+ * @props:appearance: any = "none";
+ * @props:color: any = "blue";
+ * @props:rangeSize: any = "md";
+ * @props:inputClass: any;
+ */
+declare const Range: import("svelte").Component<Props, {}, "value">;
+type Range = ReturnType<typeof Range>;
+export default Range;

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

@@ -0,0 +1,4 @@
+import type { RangeProps, RangeColorType } from "./type";
+import Range from "./Range.svelte";
+import { range } from "./theme";
+export { Range, range, type RangeProps, type RangeColorType };

package/dist/forms/range/index.js

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

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

@@ -0,0 +1,148 @@
+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", import("tailwind-variants/dist/config").TVConfig<{
+    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;
+    };
+}, {
+    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;
+    };
+}>, {
+    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", import("tailwind-variants/dist/config").TVConfig<{
+    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;
+    };
+}, {
+    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;
+    };
+}>, 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/range/type.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+type RangeColorType = "gray" | "red" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | undefined;
+type AppearanceType = "auto" | "none" | undefined;
+type RangeType = "sm" | "md" | "lg";
+interface RangeProps extends HTMLInputAttributes {
+    value?: number | string;
+    appearance?: AppearanceType;
+    color?: RangeColorType;
+    rangeSize?: RangeType;
+    inputClass?: string;
+}
+export { type RangeProps, type RangeColorType };

package/dist/forms/range/type.js

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

package/dist/forms/search/Search.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" generics="T">
+  import { type SearchProps as Props, search } from ".";
+
+  let { children, inputClass, size = "md", placeholder = "Search", value = $bindable<T>(), ...restProps }: Props<T> = $props();
+
+  const { base, content, icon, input: inputCls, leftDiv } = $derived(search({ size }));
+</script>
+
+<div class={base()}>
+  <div class={leftDiv()}>
+    <svg class={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 class={inputCls({ class: inputClass })} {placeholder} required {...restProps} />
+  {#if children}
+    <div class={content()}>
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://preview.flowbite-svelte.com/)
+## Props
+@props: 
+-->

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

@@ -0,0 +1,23 @@
+import { type SearchProps as Props } from ".";
+declare class __sveltets_Render<T> {
+    props(): Props<T>;
+    events(): {};
+    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']>;
+}
+/**
+ * [Go to docs](https://preview.flowbite-svelte.com/)
+ * ## Props
+ * @props:
+ */
+declare const Search: $$IsomorphicComponent;
+type Search<T> = InstanceType<typeof Search<T>>;
+export default Search;

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

@@ -0,0 +1,4 @@
+import type { SearchProps } from "./type";
+import Search from "./Search.svelte";
+import { search } from "./theme";
+export { Search, search, type SearchProps };

package/dist/forms/search/index.js

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

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

@@ -0,0 +1,124 @@
+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;
+    leftDiv: string;
+    icon: string;
+    content: string;
+    input: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: {
+            input: string;
+            icon: string;
+        };
+        md: {
+            input: string;
+            icon: string;
+        };
+        lg: {
+            input: string;
+            icon: string;
+        };
+    };
+}, {
+    size: {
+        sm: {
+            input: string;
+            icon: string;
+        };
+        md: {
+            input: string;
+            icon: string;
+        };
+        lg: {
+            input: string;
+            icon: string;
+        };
+    };
+}>, {
+    size: {
+        sm: {
+            input: string;
+            icon: string;
+        };
+        md: {
+            input: string;
+            icon: string;
+        };
+        lg: {
+            input: string;
+            icon: string;
+        };
+    };
+}, {
+    base: string;
+    leftDiv: string;
+    icon: string;
+    content: string;
+    input: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            input: string;
+            icon: string;
+        };
+        md: {
+            input: string;
+            icon: string;
+        };
+        lg: {
+            input: string;
+            icon: string;
+        };
+    };
+}, {
+    base: string;
+    leftDiv: string;
+    icon: string;
+    content: string;
+    input: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: {
+            input: string;
+            icon: string;
+        };
+        md: {
+            input: string;
+            icon: string;
+        };
+        lg: {
+            input: string;
+            icon: string;
+        };
+    };
+}, {
+    size: {
+        sm: {
+            input: string;
+            icon: string;
+        };
+        md: {
+            input: string;
+            icon: string;
+        };
+        lg: {
+            input: string;
+            icon: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;

package/dist/forms/search/theme.js

@@ -0,0 +1,32 @@
+import { tv } from "tailwind-variants";
+export const search = tv({
+    slots: {
+        base: "relative w-full",
+        leftDiv: "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-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+    },
+    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: "md"
+    }
+});

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

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+interface SearchProps<T> extends Omit<HTMLInputAttributes, "size"> {
+    children?: Snippet;
+    inputClass?: string;
+    size?: "sm" | "md" | "lg";
+    placeholder?: string;
+    value?: T;
+}
+export { type SearchProps };

package/dist/forms/search/type.js

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

package/dist/forms/select/Select.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" generics="T">
+  import { type SelectProps as Props, select as selectCls } from ".";
+
+  let { children, items, value = $bindable(), underline, size = "md", class: className, placeholder = "Choose option ...", ...restProps }: Props<T> = $props();
+
+  const selectStyle = $derived(selectCls({ underline, size, className }));
+</script>
+
+<select {...restProps} bind:value class={selectStyle}>
+  {#if placeholder}
+    <option disabled selected value="">{placeholder}</option>
+  {/if}
+
+  {#if items}
+    {#each items as { value, name }}
+      <option {value}>{name}</option>
+    {/each}
+  {/if}
+
+  {#if children}
+    {@render children()}
+  {/if}
+</select>
+
+<!--
+@component
+[Go to docs](https://preview.flowbite-svelte.com/)
+## Props
+@props: 
+-->

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

@@ -0,0 +1,23 @@
+import { type SelectProps as Props } from ".";
+declare class __sveltets_Render<T> {
+    props(): Props<T>;
+    events(): {};
+    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']>;
+}
+/**
+ * [Go to docs](https://preview.flowbite-svelte.com/)
+ * ## Props
+ * @props:
+ */
+declare const Select: $$IsomorphicComponent;
+type Select<T> = InstanceType<typeof Select<T>>;
+export default Select;

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

@@ -0,0 +1,4 @@
+import type { SelectProps, SelectOptionType, MultiSelectProps, SelectSize } from "./type";
+import Select from "./Select.svelte";
+import { select } from "./theme";
+export { Select, select, type SelectProps, type SelectOptionType, type MultiSelectProps, type SelectSize };

package/dist/forms/select/index.js

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

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

@@ -0,0 +1,71 @@
+export declare const select: import("tailwind-variants").TVReturnType<{
+    underline: {
+        true: string;
+        false: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "block w-full", import("tailwind-variants/dist/config").TVConfig<{
+    underline: {
+        true: string;
+        false: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    underline: {
+        true: string;
+        false: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, {
+    underline: {
+        true: string;
+        false: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    underline: {
+        true: string;
+        false: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "block w-full", import("tailwind-variants/dist/config").TVConfig<{
+    underline: {
+        true: string;
+        false: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    underline: {
+        true: string;
+        false: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/forms/select/theme.js

@@ -0,0 +1,19 @@
+import { tv } from "tailwind-variants";
+export const select = tv({
+    base: "block w-full",
+    variants: {
+        underline: {
+            true: "text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer !px-0",
+            false: "text-gray-900 bg-gray-50 border border-gray-300 rounded-lg 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: "text-sm p-2",
+            md: "text-sm p-2.5",
+            lg: "text-base py-3 px-4"
+        }
+    },
+    defaultVariants: {
+        underline: false,
+        size: "md"
+    }
+});