@pajohns/flowbite-svelte 0.1.0

package/dist/forms/input-field/theme.js

@@ -0,0 +1,100 @@
+import { tv } from "tailwind-variants";
+export const input = tv({
+    slots: {
+        base: "relative w-full",
+        input: "block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right focus:outline-hidden",
+        left: "flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 pointer-events-none start-0 p-2.5",
+        right: "flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 end-0 p-2.5",
+        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-20 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",
+        comboItem: "text-gray-900 dark:text-gray-50",
+        div: "",
+        svg: ""
+    },
+    variants: {
+        size: {
+            sm: { input: "text-xs px-2 py-1" },
+            md: { input: "text-sm px-2.5 py-2.5" },
+            lg: { input: "sm:text-base px-3 py-3" }
+        },
+        color: {
+            default: {
+                input: "border border-gray-300 dark:border-gray-600 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+            },
+            tinted: {
+                input: "border border-gray-300 dark:border-gray-500 bg-gray-50 text-gray-900 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400"
+            },
+            primary: {
+                input: "border border-primary-200 dark:border-primary-400 focus:ring-primary-500 focus:border-primary-600 dark:focus:ring-primary-500 dark:focus:border-primary-500 bg-primary-50 text-primary-900 placeholder-primary-700 dark:text-primary-400 dark:placeholder-primary-500 dark:bg-gray-700"
+            },
+            secondary: {
+                input: "border border-secondary-200 dark:border-secondary-400 focus:ring-secondary-500 focus:border-secondary-600 dark:focus:ring-secondary-500 dark:focus:border-secondary-500 bg-secondary-50 text-secondary-900 placeholder-secondary-700 dark:text-secondary-400 dark:placeholder-secondary-500 dark:bg-gray-700"
+            },
+            green: {
+                input: "border border-green-200 dark:border-green-400 focus:ring-green-500 focus:border-green-600 dark:focus:ring-green-500 dark:focus:border-green-500 bg-green-50 text-green-900 placeholder-green-700 dark:text-green-400 dark:placeholder-green-500 dark:bg-gray-700"
+            },
+            emerald: {
+                input: "border border-emerald-200 dark:border-emerald-400 focus:ring-emerald-500 focus:border-emerald-600 dark:focus:ring-emerald-500 dark:focus:border-emerald-500 bg-emerald-50 text-emerald-900 placeholder-emerald-700 dark:text-emerald-400 dark:placeholder-emerald-500 dark:bg-gray-700"
+            },
+            red: {
+                input: "border border-red-200 dark:border-red-400 focus:ring-red-500 focus:border-red-600 dark:focus:ring-red-500 dark:focus:border-red-500 bg-red-50 text-red-900 placeholder-red-700 dark:text-red-400 dark:placeholder-red-500 dark:bg-gray-700"
+            },
+            blue: {
+                input: "border border-blue-200 dark:border-blue-400 focus:ring-blue-500 focus:border-blue-600 dark:focus:ring-blue-500 dark:focus:border-blue-500 bg-blue-50 text-blue-900 placeholder-blue-700 dark:text-blue-400 dark:placeholder-blue-500 dark:bg-gray-700"
+            },
+            yellow: {
+                input: "border border-yellow-200 dark:border-yellow-400 focus:ring-yellow-500 focus:border-yellow-600 dark:focus:ring-yellow-500 dark:focus:border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 dark:text-yellow-400 dark:placeholder-yellow-500 dark:bg-gray-700"
+            },
+            orange: {
+                input: "border border-orange-200 dark:border-orange-400 focus:ring-orange-500 focus:border-orange-600 dark:focus:ring-orange-500 dark:focus:border-orange-500 bg-orange-50 text-orange-900 placeholder-orange-700 dark:text-orange-400 dark:placeholder-orange-500 dark:bg-gray-700"
+            },
+            gray: {
+                input: "border border-gray-200 dark:border-gray-400 focus:ring-gray-500 focus:border-gray-600 dark:focus:ring-gray-500 dark:focus:border-gray-500 bg-gray-50 text-gray-900 placeholder-gray-700 dark:text-gray-400 dark:placeholder-gray-500 dark:bg-gray-700"
+            },
+            teal: {
+                input: "border border-teal-200 dark:border-teal-400 focus:ring-teal-500 focus:border-teal-600 dark:focus:ring-teal-500 dark:focus:border-teal-500 bg-teal-50 text-teal-900 placeholder-teal-700 dark:text-teal-400 dark:placeholder-teal-500 dark:bg-gray-700"
+            },
+            cyan: {
+                input: "border border-cyan-200 dark:border-cyan-400 focus:ring-cyan-500 focus:border-cyan-600 dark:focus:ring-cyan-500 dark:focus:border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 dark:text-cyan-400 dark:placeholder-cyan-500 dark:bg-gray-700"
+            },
+            sky: {
+                input: "border border-sky-200 dark:border-sky-400 focus:ring-sky-500 focus:border-sky-600 dark:focus:ring-sky-500 dark:focus:border-sky-500 bg-sky-50 text-sky-900 placeholder-sky-700 dark:text-sky-400 dark:placeholder-sky-500 dark:bg-gray-700"
+            },
+            indigo: {
+                input: "border border-indigo-200 dark:border-indigo-400 focus:ring-indigo-500 focus:border-indigo-600 dark:focus:ring-indigo-500 dark:focus:border-indigo-500 bg-indigo-50 text-indigo-900 placeholder-indigo-700 dark:text-indigo-400 dark:placeholder-indigo-500 dark:bg-gray-700"
+            },
+            lime: {
+                input: "border border-lime-200 dark:border-lime-400 focus:ring-lime-500 focus:border-lime-600 dark:focus:ring-lime-500 dark:focus:border-lime-500 bg-lime-50 text-lime-900 placeholder-lime-700 dark:text-lime-400 dark:placeholder-lime-500 dark:bg-gray-700"
+            },
+            amber: {
+                input: "border border-amber-200 dark:border-amber-400 focus:ring-amber-500 focus:border-amber-600 dark:focus:ring-amber-500 dark:focus:border-amber-500 bg-amber-50 text-amber-900 placeholder-amber-700 dark:text-amber-400 dark:placeholder-amber-500 dark:bg-gray-700"
+            },
+            violet: {
+                input: "border border-violet-200 dark:border-violet-400 focus:ring-violet-500 focus:border-violet-600 dark:focus:ring-violet-500 dark:focus:border-violet-500 bg-violet-50 text-violet-900 placeholder-violet-700 dark:text-violet-400 dark:placeholder-violet-500 dark:bg-gray-700"
+            },
+            purple: {
+                input: "border border-purple-200 dark:border-purple-400 focus:ring-purple-500 focus:border-purple-600 dark:focus:ring-purple-500 dark:focus:border-purple-500 bg-purple-50 text-purple-900 placeholder-purple-700 dark:text-purple-400 dark:placeholder-purple-500 dark:bg-gray-700"
+            },
+            fuchsia: {
+                input: "border border-fuchsia-200 dark:border-fuchsia-400 focus:ring-fuchsia-500 focus:border-fuchsia-600 dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500 bg-fuchsia-50 text-fuchsia-900 placeholder-fuchsia-700 dark:text-fuchsia-400 dark:placeholder-fuchsia-500 dark:bg-gray-700"
+            },
+            pink: {
+                input: "border border-pink-200 dark:border-pink-400 focus:ring-pink-500 focus:border-pink-600 dark:focus:ring-pink-500 dark:focus:border-pink-500 bg-pink-50 text-pink-900 placeholder-pink-700 dark:text-pink-400 dark:placeholder-pink-500 dark:bg-gray-700"
+            },
+            rose: {
+                input: "border border-rose-200 dark:border-rose-400 focus:ring-rose-500 focus:border-rose-600 dark:focus:ring-rose-500 dark:focus:border-rose-500 bg-rose-50 text-rose-900 placeholder-rose-700 dark:text-rose-400 dark:placeholder-rose-500 dark:bg-gray-700"
+            }
+        },
+        grouped: {
+            false: { base: "rounded-lg", input: "rounded-lg" },
+            true: {
+                base: "first:rounded-s-lg last:rounded-e-lg not-first:-ms-px",
+                input: "first:rounded-s-lg last:rounded-e-lg not-first:-ms-px h-full"
+            }
+        }
+    },
+    defaultVariants: {
+        size: "md",
+        color: "default"
+    }
+});

package/dist/forms/label/Label.svelte

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

package/dist/forms/label/Label.svelte.d.ts

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

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

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

package/dist/forms/label/index.js

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

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

@@ -0,0 +1,75 @@
+import { type VariantProps } from "tailwind-variants";
+export type LabelVariants = VariantProps<typeof label>;
+export declare const label: 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-sm rtl:text-right font-medium block", {
+    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-sm rtl:text-right font-medium block", unknown, unknown, undefined>>;

package/dist/forms/label/theme.js

@@ -0,0 +1,29 @@
+import { tv } from "tailwind-variants";
+export const label = tv({
+    base: "text-sm rtl:text-right font-medium block",
+    variants: {
+        color: {
+            disabled: "text-gray-500 dark:text-gray-500",
+            primary: "text-primary-700 dark:text-primary-500",
+            secondary: "text-secondary-700 dark:text-secondary-500",
+            green: "text-green-700 dark:text-green-500",
+            emerald: "text-emerald-700 dark:text-emerald-500",
+            red: "text-red-700 dark:text-red-500",
+            blue: "text-blue-700 dark:text-blue-500",
+            yellow: "text-yellow-700 dark:text-yellow-500",
+            orange: "text-orange-700 dark:text-orange-500",
+            gray: "text-gray-700 dark:text-gray-200",
+            teal: "text-teal-700 dark:text-teal-500",
+            cyan: "text-cyan-700 dark:text-cyan-500",
+            sky: "text-sky-700 dark:text-sky-500",
+            indigo: "text-indigo-700 dark:text-indigo-500",
+            lime: "text-lime-700 dark:text-lime-500",
+            amber: "text-amber-700 dark:text-amber-500",
+            violet: "text-violet-700 dark:text-violet-500",
+            purple: "text-purple-700 dark:text-purple-500",
+            fuchsia: "text-fuchsia-700 dark:text-fuchsia-500",
+            pink: "text-pink-700 dark:text-pink-500",
+            rose: "text-rose-700 dark:text-rose-500"
+        }
+    }
+});

package/dist/forms/phoneinput/PhoneInput.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { PhoneInputProps } from "../..";
+  import { phoneInput } from "./theme";
+  import clsx from "clsx";
+  import { getTheme } from "../../theme/themeUtils";
+
+  let {
+    children,
+    phoneIcon = true,
+    pattern = "[0-9]{3}-[0-9]{3}-[0-9]{4}",
+    phoneType = "default",
+    floatingLabel = "Phone number",
+    labelFor = "floating-phone-number",
+    class: className,
+    classes,
+    ...restProps
+  }: PhoneInputProps = $props();
+
+  const theme = $derived(getTheme("phoneInput"));
+
+  const { div, svg, input, span, floatingInput, label } = $derived(phoneInput({ phoneType, phoneIcon }));
+</script>
+
+{#snippet phoneIconSnippet()}
+  <svg class={svg({ class: clsx(theme?.svg) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18">
+    <path
+      d="M18 13.446a3.02 3.02 0 0 0-.946-1.985l-1.4-1.4a3.054 3.054 0 0 0-4.218 0l-.7.7a.983.983 0 0 1-1.39 0l-2.1-2.1a.983.983 0 0 1 0-1.389l.7-.7a2.98 2.98 0 0 0 0-4.217l-1.4-1.4a2.824 2.824 0 0 0-4.218 0c-3.619 3.619-3 8.229 1.752 12.979C6.785 16.639 9.45 18 11.912 18a7.175 7.175 0 0 0 5.139-2.325A2.9 2.9 0 0 0 18 13.446Z"
+    />
+  </svg>
+{/snippet}
+
+{#if phoneType === "default" || phoneType === "countryCode"}
+  <div class="relative">
+    {#if phoneIcon}
+      <div class={div({ class: clsx(theme?.div, classes?.div) })}>
+        {@render phoneIconSnippet()}
+      </div>
+    {/if}
+    <input type="tel" {pattern} {...restProps} class={input({ class: clsx(theme?.input, classes?.input) })} />
+  </div>
+{:else if phoneType === "floating"}
+  <div class="relative">
+    {#if phoneIcon}
+      <span class={span({ class: clsx(theme?.span, classes?.span) })}>
+        {@render phoneIconSnippet()}
+      </span>
+    {/if}
+    <input type="tel" class={floatingInput({ class: clsx(theme?.floatingInput, classes?.floatingInput) })} {pattern} {...restProps} />
+    <label for={labelFor} class={label({ class: clsx(theme?.label, classes?.label) })}>{floatingLabel}</label>
+  </div>
+{/if}

package/dist/forms/phoneinput/PhoneInput.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PhoneInputProps } from "../..";
+declare const PhoneInput: import("svelte").Component<PhoneInputProps, {}, "">;
+type PhoneInput = ReturnType<typeof PhoneInput>;
+export default PhoneInput;

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

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

package/dist/forms/phoneinput/index.js

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

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

@@ -0,0 +1,79 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../../theme/themeUtils";
+export type PhoneInputVariants = VariantProps<typeof phoneInput> & Classes<typeof phoneInput>;
+export declare const phoneInput: import("tailwind-variants").TVReturnType<{
+    phoneType: {
+        default: {};
+        floating: {
+            svg: string;
+        };
+        countryCode: {
+            input: string;
+        };
+        copy: {};
+        advanced: {};
+    };
+    phoneIcon: {
+        true: {
+            input: string;
+        };
+        false: {};
+    };
+}, {
+    div: string;
+    svg: string;
+    input: string;
+    span: string;
+    floatingInput: string;
+    label: string;
+}, undefined, {
+    phoneType: {
+        default: {};
+        floating: {
+            svg: string;
+        };
+        countryCode: {
+            input: string;
+        };
+        copy: {};
+        advanced: {};
+    };
+    phoneIcon: {
+        true: {
+            input: string;
+        };
+        false: {};
+    };
+}, {
+    div: string;
+    svg: string;
+    input: string;
+    span: string;
+    floatingInput: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    phoneType: {
+        default: {};
+        floating: {
+            svg: string;
+        };
+        countryCode: {
+            input: string;
+        };
+        copy: {};
+        advanced: {};
+    };
+    phoneIcon: {
+        true: {
+            input: string;
+        };
+        false: {};
+    };
+}, {
+    div: string;
+    svg: string;
+    input: string;
+    span: string;
+    floatingInput: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/forms/phoneinput/theme.js

@@ -0,0 +1,28 @@
+import { tv } from "tailwind-variants";
+export const phoneInput = tv({
+    slots: {
+        div: "absolute inset-y-0 start-0 top-0 flex items-center ps-3.5 pointer-events-none",
+        svg: "w-4 h-4 text-gray-500 dark:text-gray-400",
+        input: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 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 disabled:cursor-not-allowed disabled:opacity-50",
+        span: "absolute start-0 bottom-3 text-gray-500 dark:text-gray-400",
+        floatingInput: "block py-2.5 ps-6 pe-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-primary-500 focus:outline-none focus:ring-0 focus:border-primary-600 peer disabled:cursor-not-allowed disabled:opacity-50",
+        label: "absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-placeholder-shown:start-6 peer-focus:start-0 peer-focus:text-primary-600 peer-focus:dark:text-primary-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto"
+    },
+    variants: {
+        phoneType: {
+            default: {},
+            floating: {
+                svg: "w-4 h-4 rtl:rotate-[270deg]"
+            },
+            countryCode: {
+                input: "rounded-none rounded-e-lg"
+            },
+            copy: {},
+            advanced: {}
+        },
+        phoneIcon: {
+            true: { input: "ps-10" },
+            false: {}
+        }
+    }
+});

package/dist/forms/radio/Radio.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" generics="T">
+  import { getContext } from "svelte";
+  import { radio } from "./theme";
+  import clsx from "clsx";
+  import type { RadioProps } from "../..";
+  import Label from "../label/Label.svelte";
+  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { untrack } from "svelte";
+
+  // remove inputClass in next major version
+  let {
+    children,
+    "aria-describedby": ariaDescribedby,
+    inline = false,
+    labelClass,
+    color = "primary",
+    custom = false,
+    group = $bindable<T>(),
+    value = $bindable<T>(),
+    class: className,
+    inputClass,
+    classes,
+    ...restProps
+  }: RadioProps<T> = $props();
+
+  warnThemeDeprecation(
+    "Radio",
+    untrack(() => ({ inputClass, labelClass })),
+    { inputClass: "class", labelClass: "label" }
+  );
+
+  const styling = $derived(classes ?? { label: labelClass });
+
+  const theme = $derived(getTheme("radio"));
+
+  const { input, label } = $derived(radio({ color, tinted: !!getContext("background"), custom, inline }));
+</script>
+
+<Label class={label({ class: clsx(theme?.label, styling.label) })}>
+  <input type="radio" bind:group {value} aria-describedby={ariaDescribedby} {...restProps} class={input({ class: clsx(theme?.input, className ?? 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,30 @@
+import type { RadioProps } from "../..";
+declare function $$render<T>(): {
+    props: RadioProps<T>;
+    exports: {};
+    bindings: "value" | "group";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value" | "group";
+    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://flowbite-svelte.com/)
+ * ## Props
+ * @props:
+ */
+declare const Radio: $$IsomorphicComponent;
+type Radio<T> = InstanceType<typeof Radio<T>>;
+export default Radio;

package/dist/forms/radio/RadioButton.svelte

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

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

@@ -0,0 +1,30 @@
+import type { RadioButtonProps } from "../..";
+declare function $$render<T>(): {
+    props: RadioButtonProps<T>;
+    exports: {};
+    bindings: "value" | "group";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value" | "group";
+    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://flowbite-svelte.com/)
+ * ## Props
+ * @props:
+ */
+declare const RadioButton: $$IsomorphicComponent;
+type RadioButton<T> = InstanceType<typeof RadioButton<T>>;
+export default RadioButton;

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

@@ -0,0 +1,3 @@
+export { default as Radio } from "./Radio.svelte";
+export { default as RadioButton } from "./RadioButton.svelte";
+export { radio, radioButton } from "./theme";

package/dist/forms/radio/index.js

@@ -0,0 +1,3 @@
+export { default as Radio } from "./Radio.svelte";
+export { default as RadioButton } from "./RadioButton.svelte";
+export { radio, radioButton } from "./theme";