flowbite-svelte 0.47.2 → 1.0.0-next.1

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

@@ -0,0 +1,507 @@
+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;
+        };
+    };
+}, {
+    input: string;
+    label: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    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;
+        };
+    };
+}, {
+    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;
+        };
+    };
+}>, {
+    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;
+        };
+    };
+}, {
+    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;
+        };
+    };
+}, {
+    input: string;
+    label: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    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;
+        };
+    };
+}, {
+    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;
+        };
+    };
+}>, unknown, unknown, undefined>>;

package/dist/forms/radio/theme.js

@@ -0,0 +1,75 @@
+import { tv } from "tailwind-variants";
+export const radio = tv({
+    slots: {
+        input: "relative 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" }
+        }
+    },
+    defaultVariants: {
+        color: "primary"
+    }
+});

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

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+type RadioColorType = "primary" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | undefined;
+interface RadioProps<T> extends HTMLInputAttributes {
+    children: Snippet;
+    aria_describedby?: string;
+    color?: RadioColorType;
+    group?: T;
+    value?: T;
+    inputClass?: string;
+    labelClass?: string;
+    hidden?: boolean;
+}
+export { type RadioProps, type RadioColorType };

package/dist/forms/radio/type.js

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

package/dist/forms/radio-button/RadioButton.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" generics="T">
+  import Button from "../../buttons/Button.svelte";
+  import { type RadioButtonProps as Props, radioButton } from ".";
+
+  let { children, group = $bindable<T>(), value = $bindable<T>(), inline = true, pill, outline, buttonSize, color, shadow, class: className, ...restProps }: Props<T> = $props();
+
+  const base = $derived(radioButton({ inline, className }));
+</script>
+
+<Button tag="label" checked={value === group} {pill} {outline} size={buttonSize} {color} {shadow} class={base}>
+  <input type="radio" bind:group {value} {...restProps} class="sr-only" />
+  {@render children()}
+</Button>
+
+<!--
+@component
+[Go to docs](https://preview.flowbite-svelte.com/)
+## Props
+@props: 
+-->

package/dist/forms/radio-button/RadioButton.svelte.d.ts

@@ -0,0 +1,23 @@
+import { type RadioButtonProps as Props } from ".";
+declare class __sveltets_Render<T> {
+    props(): Props<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "group" | "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 RadioButton: $$IsomorphicComponent;
+type RadioButton<T> = InstanceType<typeof RadioButton<T>>;
+export default RadioButton;

package/dist/forms/radio-button/index.d.ts

@@ -0,0 +1,4 @@
+import type { RadioButtonProps } from "./type";
+import RadioButton from "./RadioButton.svelte";
+import { radioButton } from "./theme";
+export { RadioButton, radioButton, type RadioButtonProps };

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

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

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

@@ -0,0 +1,36 @@
+export declare const radioButton: import("tailwind-variants").TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{
+    inline: {
+        true: string;
+        false: string;
+    };
+}, {
+    inline: {
+        true: string;
+        false: string;
+    };
+}>, {
+    inline: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{
+    inline: {
+        true: string;
+        false: string;
+    };
+}, {
+    inline: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;

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

@@ -0,0 +1,10 @@
+import { tv } from "tailwind-variants";
+export const radioButton = tv({
+    base: "",
+    variants: {
+        inline: {
+            true: "inline-flex",
+            false: "flex"
+        }
+    }
+});

package/dist/forms/radio-button/type.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+import type { SizeType, ColorName } from "../../types";
+import type { HTMLInputAttributes } from "svelte/elements";
+interface RadioButtonProps<T> extends HTMLInputAttributes {
+    children: Snippet;
+    group?: T;
+    value?: T;
+    inline?: boolean;
+    pill?: boolean;
+    outline?: boolean;
+    buttonSize?: SizeType | undefined;
+    color?: ColorName | "alternative" | "dark" | "light";
+    shadow?: boolean;
+}
+export { type RadioButtonProps };