@pajohns/flowbite-svelte 0.1.0

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

@@ -0,0 +1,182 @@
+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-hidden focus:ring-0 peer disabled:cursor-not-allowed disabled:opacity-50",
+        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",
+        close: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black",
+        combo: "absolute top-full right-0 left-0 z-10 mt-1 max-h-60 overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800",
+        svg: ""
+    },
+    variants: {
+        variant: {
+            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 dark:peer-focus: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 dark:peer-focus: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 dark:peer-focus: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 dark:peer-focus: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 dark:peer-focus: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 dark:peer-focus: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 dark:peer-focus: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 dark:peer-focus: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 dark:peer-focus: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 dark:peer-focus: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 dark:peer-focus: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 dark:peer-focus: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 dark:peer-focus: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 dark:peer-focus: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 dark:peer-focus: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 dark:peer-focus: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 dark:peer-focus: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 dark:peer-focus: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 dark:peer-focus: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 dark:peer-focus: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 dark:peer-focus:text-rose-500"
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            variant: "filled",
+            size: "small",
+            class: {
+                input: "px-2.5 pb-1.5 pt-4",
+                label: "top-3"
+            }
+        },
+        {
+            variant: "filled",
+            size: "default",
+            class: {
+                input: "px-2.5 pb-2.5 pt-5",
+                label: "top-4"
+            }
+        },
+        {
+            variant: "outlined",
+            size: "small",
+            class: {
+                input: "px-2.5 pb-1.5 pt-3",
+                label: "top-1"
+            }
+        },
+        {
+            variant: "outlined",
+            size: "default",
+            class: {
+                input: "px-2.5 pb-2.5 pt-4",
+                label: "top-2"
+            }
+        },
+        {
+            variant: "standard",
+            size: "small",
+            class: {
+                input: "py-2 px-0",
+                label: "top-3"
+            }
+        },
+        {
+            variant: "standard",
+            size: "default",
+            class: {
+                input: "py-2.5 px-0",
+                label: "top-3"
+            }
+        },
+        {
+            variant: "filled",
+            color: "primary",
+            class: {
+                input: "dark:focus:border-primary-500 focus:border-primary-600"
+            }
+        }
+    ],
+    defaultVariants: {
+        variant: "standard",
+        size: "default",
+        color: "primary"
+    }
+});

package/dist/forms/helper/Helper.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { helper } from "./theme";
+  import type { HelperProps } from "../..";
+  import clsx from "clsx";
+  import { getTheme } from "../../theme/themeUtils";
+
+  let { children, class: className, color = "gray", ...restProps }: HelperProps = $props();
+
+  const theme = $derived(getTheme("helper"));
+
+  const base = $derived(helper({ color, class: clsx(theme, className) }));
+</script>
+
+<p {...restProps} class={base}>
+  {@render children?.()}
+</p>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L849)
+## Props
+@prop children
+@prop class: className
+@prop color = "gray"
+@prop ...restProps
+-->

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

@@ -0,0 +1,14 @@
+import type { HelperProps } from "../..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L849)
+ * ## Props
+ * @prop children
+ * @prop class: className
+ * @prop color = "gray"
+ * @prop ...restProps
+ */
+declare const Helper: import("svelte").Component<HelperProps, {}, "">;
+type Helper = ReturnType<typeof Helper>;
+export default Helper;

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

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

package/dist/forms/helper/index.js

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

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

@@ -0,0 +1,75 @@
+import { type VariantProps } from "tailwind-variants";
+export type HelperVariants = VariantProps<typeof helper>;
+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", {
+    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", 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/input-addon/InputAddon.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import clsx from "clsx";
+  import type { InputAddonProps } from "../..";
+  import { clampSize } from "../input-field";
+  import { getButtonGroupContext } from "../../context";
+
+  let { children, class: className, size, ...restProps }: InputAddonProps = $props();
+
+  let background: boolean = getContext("background");
+  const group = getButtonGroupContext();
+
+  const borderClasses = {
+    base: "border-gray-300 dark:border-gray-600",
+    tinted: "border-gray-300 dark:border-gray-500"
+  };
+
+  const darkBgClasses = {
+    base: "dark:bg-gray-600 dark:text-gray-400",
+    tinted: "dark:bg-gray-500 dark:text-gray-300"
+  };
+
+  const divider = {
+    base: "dark:border-e-gray-700 dark:last:border-e-gray-600",
+    tinted: "dark:border-e-gray-600 dark:last:border-e-gray-500"
+  };
+
+  const textSizes = { sm: "sm:text-xs", md: "text-sm", lg: "sm:text-base" };
+  const prefixPadding = { sm: "px-2", md: "px-3", lg: "px-4" };
+
+  // size: explicit, inherited, default
+  let _size = $derived(size || (group?.size ? clampSize(group.size) : undefined) || "md");
+
+  let divClass: string = $derived(
+    clsx(
+      textSizes[_size],
+      prefixPadding[_size],
+      "text-gray-500 bg-gray-200",
+      background ? darkBgClasses.tinted : darkBgClasses.base,
+      background ? divider.tinted : divider.base,
+      background ? borderClasses["tinted"] : borderClasses["base"],
+      "inline-flex items-center border",
+      group && "not-first:-ms-px",
+      "first:rounded-s-lg last:rounded-e-lg",
+      className
+    )
+  );
+</script>
+
+<div {...restProps} class={divClass}>
+  {@render children()}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L891)
+## Props
+@prop children
+@prop class: className
+@prop size
+@prop ...restProps
+-->

package/dist/forms/input-addon/InputAddon.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { InputAddonProps } from "../..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L891)
+ * ## Props
+ * @prop children
+ * @prop class: className
+ * @prop size
+ * @prop ...restProps
+ */
+declare const InputAddon: import("svelte").Component<InputAddonProps, {}, "">;
+type InputAddon = ReturnType<typeof InputAddon>;
+export default InputAddon;

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

@@ -0,0 +1 @@
+export { default as InputAddon } from "./InputAddon.svelte";

package/dist/forms/input-addon/index.js

@@ -0,0 +1 @@
+export { default as InputAddon } from "./InputAddon.svelte";