flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/forms/radio/Radio.svelte

@@ -0,0 +1,22 @@
+<script lang="ts" generics="T">
+  import { getContext } from "svelte";
+  import Label from "../label/Label.svelte";
+  import { type RadioProps as Props, radio } from ".";
+  import clsx from "clsx";
+
+  let { children, "aria-describedby": ariaDescribedby, inline = false, class: labelClass, color = "primary", custom = false, group = $bindable<T>(), value = $bindable<T>(), inputClass, ...restProps }: Props<T> = $props();
+
+  const { input, label } = $derived(radio({ color, tinted: !!getContext("background"), custom, inline }));
+</script>
+
+<Label class={label({ class: clsx(labelClass) })}>
+  <input type="radio" bind:group {value} aria-describedby={ariaDescribedby} {...restProps} class={input({ class: inputClass })} />
+  {@render children?.()}
+</Label>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: 
+-->

package/dist/forms/radio/Radio.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare class __sveltets_Render<T> {
+    props(): Record<string, never>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type RadioProps_<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type RadioEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type RadioSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props:
+ */
+export default class Radio<T> extends SvelteComponentTyped<RadioProps_<T>, RadioEvents<T>, RadioSlots<T>> {
+}
+export {};

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

@@ -0,0 +1,4 @@
+import type { RadioProps, RadioColorType } from "./type";
+import Radio from "./Radio.svelte";
+import { radio } from "./theme";
+export { Radio, radio, type RadioProps, type RadioColorType };

package/dist/forms/radio/index.js

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

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

@@ -0,0 +1,273 @@
+import { type VariantProps } from "tailwind-variants";
+export type RadioVariants = VariantProps<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>>;

package/dist/forms/radio/theme.js

@@ -0,0 +1,83 @@
+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"
+    }
+});

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

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { RadioVariants } from "./theme";
+interface RadioProps<T> extends Omit<HTMLInputAttributes, "color">, RadioVariants {
+    children: Snippet;
+    group?: T;
+    value?: T;
+    inputClass?: string;
+    labelClass?: string;
+}
+export { type RadioProps };

package/dist/forms/radio/type.js

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

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

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

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare class __sveltets_Render<T> {
+    props(): Record<string, never>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type RadioButtonProps_<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type RadioButtonEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type RadioButtonSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props:
+ */
+export default class RadioButton<T> extends SvelteComponentTyped<RadioButtonProps_<T>, RadioButtonEvents<T>, RadioButtonSlots<T>> {
+}
+export {};

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,25 @@
+export declare const radioButton: import("tailwind-variants").TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+    checked: {
+        true: string;
+    };
+}, undefined, "", {
+    inline: {
+        true: string;
+        false: string;
+    };
+    checked: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+    checked: {
+        true: string;
+    };
+}, undefined, "", unknown, unknown, undefined>>;

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

@@ -0,0 +1,16 @@
+import { tv } from "tailwind-variants";
+export const radioButton = tv({
+    base: "",
+    variants: {
+        inline: {
+            true: "inline-flex",
+            false: "flex"
+        },
+        checked: {
+            true: "outline-4 outline-green-500"
+        }
+    },
+    defaultVariants: {
+        inline: true
+    }
+});

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

@@ -0,0 +1,13 @@
+import type { ButtonProps } from "../../buttons";
+import type { HTMLInputAttributes } from "svelte/elements";
+interface RadioButtonProps<T> extends Omit<HTMLInputAttributes, "size"> {
+    group?: T;
+    value?: T;
+    inline?: boolean;
+    pill?: boolean;
+    outline?: boolean;
+    size?: ButtonProps["size"];
+    color?: ButtonProps["color"];
+    shadow?: boolean;
+}
+export { type RadioButtonProps };

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

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

package/dist/forms/range/Range.svelte

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

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

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type RangeProps_ = typeof __propDef.props;
+export { RangeProps_ as RangeProps };
+export type RangeEvents = typeof __propDef.events;
+export type RangeSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: value: any = $bindable();
+ * @props:appearance: any = "none";
+ * @props:color: any = "blue";
+ * @props:size: any = "md";
+ * @props:class: string;
+ */
+export default class Range extends SvelteComponentTyped<RangeProps_, RangeEvents, RangeSlots> {
+}

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

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

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,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>>;