flowbite-svelte 0.47.2 → 1.0.0-next.1

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

@@ -0,0 +1,179 @@
+import { tv } from "tailwind-variants";
+export const floatingLabelInput = tv({
+    slots: {
+        base: "relative",
+        input: "block w-full text-sm text-gray-900 bg-transparent appearance-none dark:text-white focus:outline-none focus:ring-0 peer",
+        label: "absolute text-sm duration-300 transform scale-75 z-10 origin-left rtl:origin-right peer-placeholder-shown:scale-100 peer-focus:scale-75"
+    },
+    variants: {
+        inputStyle: {
+            filled: {
+                base: "relative",
+                input: "rounded-t-lg border-0 border-b-2 bg-gray-50 dark:bg-gray-700",
+                label: "-translate-y-4 start-2.5 peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-4"
+            },
+            outlined: {
+                base: "relative",
+                input: "rounded-lg border",
+                label: "-translate-y-4 bg-white dark:bg-gray-900 px-2 peer-focus:px-2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:-translate-y-4 start-1"
+            },
+            standard: {
+                base: "relative z-0",
+                input: "border-0 border-b-2",
+                label: "-translate-y-6 -z-10 peer-focus:start-0 peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-6"
+            }
+        },
+        size: {
+            small: {},
+            default: {}
+        },
+        color: {
+            default: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-primary-500 focus:border-primary-600",
+                label: "text-gray-500 dark:text-gray-400 peer-focus:text-primary-600 peer-focus:dark:text-primary-500"
+            },
+            primary: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-primary-500 focus:border-primary-600",
+                label: "text-primary-500 dark:text-primary-400 peer-focus:text-primary-600 peer-focus:dark:text-primary-500"
+            },
+            secondary: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-secondary-500 focus:border-secondary-600",
+                label: "text-secondary-500 dark:text-secondary-400 peer-focus:text-secondary-600 peer-focus:dark:text-secondary-500"
+            },
+            gray: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-gray-500 focus:border-gray-600",
+                label: "text-gray-500 dark:text-gray-400 peer-focus:text-gray-600 peer-focus:dark:text-gray-500"
+            },
+            red: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-red-500 focus:border-red-600",
+                label: "text-red-500 dark:text-red-400 peer-focus:text-red-600 peer-focus:dark:text-red-500"
+            },
+            orange: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-orange-500 focus:border-orange-600",
+                label: "text-orange-500 dark:text-orange-400 peer-focus:text-orange-600 peer-focus:dark:text-orange-500"
+            },
+            amber: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-amber-500 focus:border-amber-600",
+                label: "text-amber-500 dark:text-amber-400 peer-focus:text-amber-600 peer-focus:dark:text-amber-500"
+            },
+            yellow: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-yellow-500 focus:border-yellow-600",
+                label: "text-yellow-500 dark:text-yellow-400 peer-focus:text-yellow-600 peer-focus:dark:text-yellow-500"
+            },
+            lime: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-lime-500 focus:border-lime-600",
+                label: "text-lime-500 dark:text-lime-400 peer-focus:text-lime-600 peer-focus:dark:text-lime-500"
+            },
+            green: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-green-500 focus:border-green-600",
+                label: "text-green-500 dark:text-green-400 peer-focus:text-green-600 peer-focus:dark:text-green-500"
+            },
+            emerald: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-emerald-500 focus:border-emerald-600",
+                label: "text-emerald-500 dark:text-emerald-400 peer-focus:text-emerald-600 peer-focus:dark:text-emerald-500"
+            },
+            teal: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-teal-500 focus:border-teal-600",
+                label: "text-teal-500 dark:text-teal-400 peer-focus:text-teal-600 peer-focus:dark:text-teal-500"
+            },
+            cyan: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-cyan-500 focus:border-cyan-600",
+                label: "text-cyan-500 dark:text-cyan-400 peer-focus:text-cyan-600 peer-focus:dark:text-cyan-500"
+            },
+            sky: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-sky-500 focus:border-sky-600",
+                label: "text-sky-500 dark:text-sky-400 peer-focus:text-sky-600 peer-focus:dark:text-sky-500"
+            },
+            blue: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-blue-500 focus:border-blue-600",
+                label: "text-blue-500 dark:text-blue-400 peer-focus:text-blue-600 peer-focus:dark:text-blue-500"
+            },
+            indigo: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-indigo-500 focus:border-indigo-600",
+                label: "text-indigo-500 dark:text-indigo-400 peer-focus:text-indigo-600 peer-focus:dark:text-indigo-500"
+            },
+            violet: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-violet-500 focus:border-violet-600",
+                label: "text-violet-600 dark:text-violet-500 peer-focus:text-violet-600 peer-focus:dark:text-violet-500"
+            },
+            purple: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-purple-500 focus:border-purple-600",
+                label: "text-purple-600 dark:text-purple-500 peer-focus:text-purple-600 peer-focus:dark:text-purple-500"
+            },
+            fuchsia: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-fuchsia-500 focus:border-fuchsia-600",
+                label: "text-fuchsia-600 dark:text-fuchsia-500 peer-focus:text-fuchsia-600 peer-focus:dark:text-fuchsia-500"
+            },
+            pink: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-pink-500 focus:border-pink-600",
+                label: "text-pink-600 dark:text-pink-500 peer-focus:text-pink-600 peer-focus:dark:text-pink-500"
+            },
+            rose: {
+                input: "border-gray-300 dark:border-gray-600 dark:focus:border-rose-500 focus:border-rose-600",
+                label: "text-rose-600 dark:text-rose-500 peer-focus:text-rose-600 peer-focus:dark:text-rose-500"
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            inputStyle: "filled",
+            size: "small",
+            class: {
+                input: "px-2.5 pb-1.5 pt-4",
+                label: "top-3"
+            }
+        },
+        {
+            inputStyle: "filled",
+            size: "default",
+            class: {
+                input: "px-2.5 pb-2.5 pt-5",
+                label: "top-4"
+            }
+        },
+        {
+            inputStyle: "outlined",
+            size: "small",
+            class: {
+                input: "px-2.5 pb-1.5 pt-3",
+                label: "top-1"
+            }
+        },
+        {
+            inputStyle: "outlined",
+            size: "default",
+            class: {
+                input: "px-2.5 pb-2.5 pt-4",
+                label: "top-2"
+            }
+        },
+        {
+            inputStyle: "standard",
+            size: "small",
+            class: {
+                input: "py-2 px-0",
+                label: "top-3"
+            }
+        },
+        {
+            inputStyle: "standard",
+            size: "default",
+            class: {
+                input: "py-2.5 px-0",
+                label: "top-3"
+            }
+        },
+        {
+            inputStyle: "filled",
+            color: "primary",
+            class: {
+                input: "dark:focus:border-primary-500 focus:border-primary-600"
+            }
+        }
+    ],
+    defaultVariants: {
+        inputStyle: "standard",
+        size: "default",
+        color: "primary"
+    }
+});

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

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+import { type ColorName } from "../../types";
+interface FloatingLabelInputProps extends Omit<HTMLInputAttributes, "size"> {
+    children: Snippet;
+    id?: string;
+    value?: string | number | readonly string[] | undefined;
+    aria_describedby?: string;
+    inputStyle?: "filled" | "outlined" | "standard";
+    size?: "small" | "default";
+    color?: ColorName | "default";
+    divClass?: string;
+    inputClass?: string;
+    labelClass?: string;
+}
+export { type FloatingLabelInputProps };

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

@@ -0,0 +1,2 @@
+import {} from "../../types";
+export {};

package/dist/forms/helper/Helper.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { type HelperProps as Props, helper } from ".";
+
+  let { children, class: className, color = "gray", ...restProps }: Props = $props();
+
+  const base = $derived(helper({ color, className }));
+</script>
+
+<p {...restProps} class={base}>
+  {@render children()}
+</p>
+
+<!--
+@component
+[Go to docs](https://preview.flowbite-svelte.com/)
+## Props
+@props: children: any;
+@props:class: string;
+@props:color: any = "gray";
+-->

package/dist/forms/helper/Helper.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type HelperProps as Props } from ".";
+/**
+ * [Go to docs](https://preview.flowbite-svelte.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:class: string;
+ * @props:color: any = "gray";
+ */
+declare const Helper: import("svelte").Component<Props, {}, "">;
+type Helper = ReturnType<typeof Helper>;
+export default Helper;

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

@@ -0,0 +1,4 @@
+import type { HelperProps } from "./type";
+import Helper from "./Helper.svelte";
+import { helper } from "./theme";
+export { Helper, helper, type HelperProps };

package/dist/forms/helper/index.js

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

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

@@ -0,0 +1,169 @@
+export declare const helper: import("tailwind-variants").TVReturnType<{
+    color: {
+        disabled: string;
+        primary: string;
+        secondary: string;
+        green: string;
+        emerald: string;
+        red: string;
+        blue: string;
+        yellow: string;
+        orange: string;
+        gray: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        indigo: string;
+        lime: string;
+        amber: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, undefined, "text-xs font-normal text-gray-500 dark:text-gray-300", import("tailwind-variants/dist/config").TVConfig<{
+    color: {
+        disabled: string;
+        primary: string;
+        secondary: string;
+        green: string;
+        emerald: string;
+        red: string;
+        blue: string;
+        yellow: string;
+        orange: string;
+        gray: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        indigo: string;
+        lime: string;
+        amber: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, {
+    color: {
+        disabled: string;
+        primary: string;
+        secondary: string;
+        green: string;
+        emerald: string;
+        red: string;
+        blue: string;
+        yellow: string;
+        orange: string;
+        gray: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        indigo: string;
+        lime: string;
+        amber: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}>, {
+    color: {
+        disabled: string;
+        primary: string;
+        secondary: string;
+        green: string;
+        emerald: string;
+        red: string;
+        blue: string;
+        yellow: string;
+        orange: string;
+        gray: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        indigo: string;
+        lime: string;
+        amber: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        disabled: string;
+        primary: string;
+        secondary: string;
+        green: string;
+        emerald: string;
+        red: string;
+        blue: string;
+        yellow: string;
+        orange: string;
+        gray: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        indigo: string;
+        lime: string;
+        amber: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, undefined, "text-xs font-normal text-gray-500 dark:text-gray-300", import("tailwind-variants/dist/config").TVConfig<{
+    color: {
+        disabled: string;
+        primary: string;
+        secondary: string;
+        green: string;
+        emerald: string;
+        red: string;
+        blue: string;
+        yellow: string;
+        orange: string;
+        gray: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        indigo: string;
+        lime: string;
+        amber: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, {
+    color: {
+        disabled: string;
+        primary: string;
+        secondary: string;
+        green: string;
+        emerald: string;
+        red: string;
+        blue: string;
+        yellow: string;
+        orange: string;
+        gray: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        indigo: string;
+        lime: string;
+        amber: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/forms/helper/theme.js

@@ -0,0 +1,29 @@
+import { tv } from "tailwind-variants";
+export const helper = tv({
+    base: "text-xs font-normal text-gray-500 dark:text-gray-300",
+    variants: {
+        color: {
+            disabled: "text-gray-400 dark:text-gray-500",
+            primary: "text-primary-500 dark:text-primary-400",
+            secondary: "text-secondary-500 dark:text-secondary-400",
+            green: "text-green-500 dark:text-green-400",
+            emerald: "text-emerald-500 dark:text-emerald-400",
+            red: "text-red-500 dark:text-red-400",
+            blue: "text-blue-500 dark:text-blue-400",
+            yellow: "text-yellow-500 dark:text-yellow-400",
+            orange: "text-orange-500 dark:text-orange-400",
+            gray: "text-gray-500 dark:text-gray-400",
+            teal: "text-teal-500 dark:text-teal-400",
+            cyan: "text-cyan-500 dark:text-cyan-400",
+            sky: "text-sky-500 dark:text-sky-400",
+            indigo: "text-indigo-500 dark:text-indigo-400",
+            lime: "text-lime-500 dark:text-lime-400",
+            amber: "text-amber-500 dark:text-amber-400",
+            violet: "text-violet-500 dark:text-violet-400",
+            purple: "text-purple-500 dark:text-purple-400",
+            fuchsia: "text-fuchsia-500 dark:text-fuchsia-400",
+            pink: "text-pink-500 dark:text-pink-400",
+            rose: "text-rose-500 dark:text-rose-400"
+        }
+    }
+});

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type ColorName } from "../../types";
+interface HelperProps extends HTMLAttributes<HTMLParagraphElement> {
+    children: Snippet;
+    class?: string;
+    color?: ColorName | "disabled";
+}
+export { type HelperProps };

package/dist/forms/helper/type.js

@@ -0,0 +1,2 @@
+import {} from "../../types";
+export {};

package/dist/forms/input/Input.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { SizeType } from "../../types";
+  import { getContext } from "svelte";
+  import { CloseButton } from "../..";
+  import { type InputProps as Props, input, clampSize, type InputValue } from ".";
+
+  let { children, left, right, value = $bindable<InputValue>(), clearable = false, size, color = "default", class: className, classLeft, classRight, divClass, ...restProps }: Props<InputValue> = $props();
+
+  // tinted if put in component having its own background
+  let background: boolean = getContext("background");
+
+  let group: { size: SizeType } = getContext("group");
+  let isGroup = !!group;
+  let _size = $derived(size || clampSize(group?.size) || "md");
+  const _color = $derived(color === "default" && background ? "tinted" : color);
+
+  const { base, input: inputCls, left: leftCls, right: rightCls } = $derived(input({ size: _size, color: _color, group: isGroup, class: className }));
+
+  const clearAll = () => {
+    value = undefined;
+  };
+</script>
+
+{#snippet inputContent()}
+  {#if left}
+    <div class={leftCls({ class: classLeft })}>
+      {@render left()}
+    </div>
+  {/if}
+  {#if children}
+    {@render children({ ...restProps, class: inputCls() })}
+  {:else}
+    <input {...restProps} bind:value class={inputCls({ class: className })} />
+  {/if}
+  {#if right}
+    <div class={rightCls({ class: classRight })}>
+      {@render right()}
+    </div>
+  {/if}
+  {#if clearable && value && `${value}`.length > 0}
+    <CloseButton {size} onclick={clearAll} class={rightCls({ class: classRight })} />
+  {/if}
+{/snippet}
+
+{#if group}
+  {@render inputContent()}
+{:else if right || left}
+  <div class={base({ class: divClass })}>
+    {@render inputContent()}
+  </div>
+{:else}
+  {@render inputContent()}
+{/if}
+
+<!--
+@component
+[Go to docs](https://preview.flowbite-svelte.com/)
+## Props
+@props: 
+-->

package/dist/forms/input/Input.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type InputProps as Props, type InputValue } from ".";
+/**
+ * [Go to docs](https://preview.flowbite-svelte.com/)
+ * ## Props
+ * @props:
+ */
+declare const Input: import("svelte").Component<Props<InputValue>, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

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

@@ -0,0 +1,6 @@
+import type { InputProps, InputValue } from "./type";
+import Input from "./Input.svelte";
+import type { SizeType } from "../../types";
+import { input } from "./theme";
+declare function clampSize(s: SizeType): "sm" | "md" | "lg";
+export { Input, input, type InputProps, type InputValue, clampSize };

package/dist/forms/input/index.js

@@ -0,0 +1,6 @@
+import Input from "./Input.svelte";
+import { input } from "./theme";
+function clampSize(s) {
+    return s && s === "xs" ? "sm" : s === "xl" ? "lg" : s;
+}
+export { Input, input, clampSize };