flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/forms/checkbox/Checkbox.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import Label from "../label/Label.svelte";
+  import { type CheckboxProps as Props, checkbox } from ".";
+  import clsx from "clsx";
+
+  let { children, color = "primary", custom, inline, tinted, rounded, group = $bindable([]), choices = [], checked = $bindable(false), indeterminate, class: className, value, ...restProps }: Props = $props();
+
+  const { base, label: labelStyle } = $derived(checkbox({ color, tinted, custom, rounded, inline }));
+
+  // see the discussion for bind:group - https://github.com/sveltejs/svelte/issues/2308
+</script>
+
+{#if choices.length > 0}
+  {#each choices as choice, i}
+    <Label class={labelStyle({ class: clsx(className) })}>
+      <input type="checkbox" value={choice.value} checked={choice.checked} bind:group {...restProps} class={base()} />
+      {#if children}
+        {@render children(choice)}
+      {:else}
+        {choice.label}
+      {/if}
+    </Label>
+  {/each}
+{:else}
+  <Label class={labelStyle({ class: clsx(className) })}>
+    <input type="checkbox" {value} bind:checked {indeterminate} {...restProps} class={base()} />
+    {#if children}
+      {@render children({ value, checked })}
+    {/if}
+  </Label>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: children: any;
+@props:color: any = "primary";
+@props:custom: any;
+@props:inline: any;
+@props:tinted: any;
+@props:rounded: any;
+@props:group: any = $bindable([]);
+@props:choices: any = [];
+@props:checked: any = $bindable(false);
+@props:indeterminate: any;
+@props:class: string;
+@props:value: any;
+-->

package/dist/forms/checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type CheckboxProps_ = typeof __propDef.props;
+export { CheckboxProps_ as CheckboxProps };
+export type CheckboxEvents = typeof __propDef.events;
+export type CheckboxSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:color: any = "primary";
+ * @props:custom: any;
+ * @props:inline: any;
+ * @props:tinted: any;
+ * @props:rounded: any;
+ * @props:group: any = $bindable([]);
+ * @props:choices: any = [];
+ * @props:checked: any = $bindable(false);
+ * @props:indeterminate: any;
+ * @props:class: string;
+ * @props:value: any;
+ */
+export default class Checkbox extends SvelteComponentTyped<CheckboxProps_, CheckboxEvents, CheckboxSlots> {
+}

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

@@ -0,0 +1,4 @@
+import type { CheckboxProps, CheckboxItem } from "./type";
+import Checkbox from "./Checkbox.svelte";
+import { checkbox } from "./theme";
+export { Checkbox, checkbox, type CheckboxProps, type CheckboxItem };

package/dist/forms/checkbox/index.js

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

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

@@ -0,0 +1,273 @@
+import { type VariantProps } from "tailwind-variants";
+export type CheckboxVariants = VariantProps<typeof checkbox>;
+export declare const checkbox: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        gray: {
+            base: string;
+        };
+        red: {
+            base: string;
+        };
+        orange: {
+            base: string;
+        };
+        amber: {
+            base: string;
+        };
+        yellow: {
+            base: string;
+        };
+        lime: {
+            base: string;
+        };
+        green: {
+            base: string;
+        };
+        emerald: {
+            base: string;
+        };
+        teal: {
+            base: string;
+        };
+        cyan: {
+            base: string;
+        };
+        sky: {
+            base: string;
+        };
+        blue: {
+            base: string;
+        };
+        indigo: {
+            base: string;
+        };
+        violet: {
+            base: string;
+        };
+        purple: {
+            base: string;
+        };
+        fuchsia: {
+            base: string;
+        };
+        pink: {
+            base: string;
+        };
+        rose: {
+            base: string;
+        };
+    };
+    tinted: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    custom: {
+        true: {
+            base: string;
+        };
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+    };
+    inline: {
+        true: {
+            label: string;
+            false: string;
+        };
+    };
+}, {
+    base: string;
+    label: string;
+}, undefined, {
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        gray: {
+            base: string;
+        };
+        red: {
+            base: string;
+        };
+        orange: {
+            base: string;
+        };
+        amber: {
+            base: string;
+        };
+        yellow: {
+            base: string;
+        };
+        lime: {
+            base: string;
+        };
+        green: {
+            base: string;
+        };
+        emerald: {
+            base: string;
+        };
+        teal: {
+            base: string;
+        };
+        cyan: {
+            base: string;
+        };
+        sky: {
+            base: string;
+        };
+        blue: {
+            base: string;
+        };
+        indigo: {
+            base: string;
+        };
+        violet: {
+            base: string;
+        };
+        purple: {
+            base: string;
+        };
+        fuchsia: {
+            base: string;
+        };
+        pink: {
+            base: string;
+        };
+        rose: {
+            base: string;
+        };
+    };
+    tinted: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    custom: {
+        true: {
+            base: string;
+        };
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+    };
+    inline: {
+        true: {
+            label: string;
+            false: string;
+        };
+    };
+}, {
+    base: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        gray: {
+            base: string;
+        };
+        red: {
+            base: string;
+        };
+        orange: {
+            base: string;
+        };
+        amber: {
+            base: string;
+        };
+        yellow: {
+            base: string;
+        };
+        lime: {
+            base: string;
+        };
+        green: {
+            base: string;
+        };
+        emerald: {
+            base: string;
+        };
+        teal: {
+            base: string;
+        };
+        cyan: {
+            base: string;
+        };
+        sky: {
+            base: string;
+        };
+        blue: {
+            base: string;
+        };
+        indigo: {
+            base: string;
+        };
+        violet: {
+            base: string;
+        };
+        purple: {
+            base: string;
+        };
+        fuchsia: {
+            base: string;
+        };
+        pink: {
+            base: string;
+        };
+        rose: {
+            base: string;
+        };
+    };
+    tinted: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    custom: {
+        true: {
+            base: string;
+        };
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+    };
+    inline: {
+        true: {
+            label: string;
+            false: string;
+        };
+    };
+}, {
+    base: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/forms/checkbox/theme.js

@@ -0,0 +1,91 @@
+import { tv } from "tailwind-variants";
+export const checkbox = tv({
+    slots: {
+        base: "w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 rounded-sm",
+        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: {
+                base: "text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"
+            },
+            secondary: {
+                base: "text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600"
+            },
+            gray: {
+                base: "text-gray-600 focus:ring-gray-600 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
+            },
+            red: {
+                base: "text-red-600 focus:ring-red-600 dark:ring-offset-red-600 dark:focus:ring-red-600"
+            },
+            orange: {
+                base: "text-orange-600 focus:ring-orange-600 dark:ring-offset-orange-600 dark:focus:ring-orange-600"
+            },
+            amber: {
+                base: "text-amber-600 focus:ring-amber-600 dark:ring-offset-amber-600 dark:focus:ring-amber-600"
+            },
+            yellow: {
+                base: "text-yellow-400 focus:ring-yellow-400 dark:ring-offset-yellow-400 dark:focus:ring-yellow-400"
+            },
+            lime: {
+                base: "text-lime-700 focus:ring-lime-700 dark:ring-offset-lime-700 dark:focus:ring-lime-700"
+            },
+            green: {
+                base: "text-green-600 focus:ring-green-600 dark:ring-offset-green-600 dark:focus:ring-green-600"
+            },
+            emerald: {
+                base: "text-emerald-600 focus:ring-emerald-600 dark:ring-offset-emerald-600 dark:focus:ring-emerald-600"
+            },
+            teal: {
+                base: "text-teal-600 focus:ring-teal-600 dark:ring-offset-teal-600 dark:focus:ring-teal-600"
+            },
+            cyan: {
+                base: "text-cyan-600 focus:ring-cyan-600 dark:ring-offset-cyan-600 dark:focus:ring-cyan-600"
+            },
+            sky: {
+                base: "text-sky-600 focus:ring-sky-600 dark:ring-offset-sky-600 dark:focus:ring-sky-600"
+            },
+            blue: {
+                base: "text-blue-700 focus:ring-blue-600 dark:ring-offset-blue-700 dark:focus:ring-blue-700"
+            },
+            indigo: {
+                base: "text-indigo-700 focus:ring-indigo-700 dark:ring-offset-indigo-700 dark:focus:ring-indigo-700"
+            },
+            violet: {
+                base: "text-violet-600 focus:ring-violet-600 dark:ring-offset-violet-600 dark:focus:ring-violet-600"
+            },
+            purple: {
+                base: "text-purple-600 focus:ring-purple-600 dark:ring-offset-purple-600 dark:focus:ring-purple-600"
+            },
+            fuchsia: {
+                base: "text-fuchsia-600 focus:ring-fuchsia-600 dark:ring-offset-fuchsia-600 dark:focus:ring-fuchsia-600"
+            },
+            pink: {
+                base: "text-pink-600 focus:ring-pink-600 dark:ring-offset-pink-600 dark:focus:ring-pink-600"
+            },
+            rose: {
+                base: "text-rose-600 focus:ring-rose-600 dark:ring-offset-rose-600 dark:focus:ring-rose-600"
+            }
+        },
+        tinted: {
+            true: { base: "dark:bg-gray-600 dark:border-gray-500" },
+            false: { base: "dark:bg-gray-700 dark:border-gray-600" }
+        },
+        custom: {
+            true: { base: "sr-only peer" }
+        },
+        rounded: {
+            true: { base: "rounded-sm" }
+        },
+        inline: {
+            true: {
+                label: "inline-flex",
+                false: "flex items-center"
+            }
+        }
+    },
+    defaultVariants: {
+        color: "primary"
+    }
+});

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

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { CheckboxVariants } from "./theme";
+interface CheckboxItem {
+    value: string;
+    label?: string;
+    checked?: boolean | null;
+    [key: string]: any;
+}
+interface CheckboxProps extends Omit<HTMLInputAttributes, "children"> {
+    children?: Snippet<[CheckboxItem]>;
+    color?: CheckboxVariants["color"];
+    custom?: boolean;
+    inline?: boolean;
+    tinted?: boolean;
+    rounded?: boolean;
+    group?: (string | number)[];
+    choices?: CheckboxItem[];
+    indeterminate?: boolean;
+}
+export { type CheckboxProps, type CheckboxItem };

package/dist/forms/checkbox/type.js

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

package/dist/forms/checkbox-button/CheckboxButton.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import Button from "../../buttons/Button.svelte";
+  import clsx from "clsx";
+  import { type CheckboxButtonProps as Props } from ".";
+  import { checkButton } from "./theme";
+
+  let { children, class: className, group = $bindable([]), value, checked, inline, pill, outline, size, color, shadow, ...restProps }: Props = $props();
+
+  // react on external group changes
+  function init(_: HTMLElement, _group: (string | number)[]) {
+    group = _group ?? [];
+
+    if (checked === undefined && value !== undefined) checked = group.includes(value);
+    onChange();
+
+    $effect(() => {
+      if (value !== undefined) {
+        checked = group.includes(value);
+      }
+    });
+  }
+
+  function onChange() {
+    console.log("onChange", value);
+    if (!value) return;
+
+    // There's a bug in Svelte and bind:group is not working with wrapped checkbox
+    // This workaround is taken from:
+    // https://svelte.dev/repl/de117399559f4e7e9e14e2fc9ab243cc?version=3.12.1
+    const index = group.indexOf(value);
+
+    if (checked === undefined) checked = index >= 0;
+
+    if (checked) {
+      if (index < 0) {
+        group.push(value);
+        group = group;
+      }
+    } else {
+      if (index >= 0) {
+        group.splice(index, 1);
+        group = group;
+      }
+    }
+  }
+
+  let buttonClass: string = $derived(checkButton({ inline, checked, class: clsx(className) }));
+</script>
+
+<Button tag="label" {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
+  <input use:init={group} type="checkbox" bind:checked {value} {...restProps} class="sr-only" onchange={onChange} />
+  {@render children?.()}
+</Button>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: children: any;
+@props:class: string;
+@props:group: any = $bindable([]);
+@props:value: any;
+@props:checked: any;
+@props:inline: any;
+@props:pill: any;
+@props:outline: any;
+@props:size: any;
+@props:color: any;
+@props:shadow: any;
+-->

package/dist/forms/checkbox-button/CheckboxButton.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type CheckboxButtonProps_ = typeof __propDef.props;
+export { CheckboxButtonProps_ as CheckboxButtonProps };
+export type CheckboxButtonEvents = typeof __propDef.events;
+export type CheckboxButtonSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:class: string;
+ * @props:group: any = $bindable([]);
+ * @props:value: any;
+ * @props:checked: any;
+ * @props:inline: any;
+ * @props:pill: any;
+ * @props:outline: any;
+ * @props:size: any;
+ * @props:color: any;
+ * @props:shadow: any;
+ */
+export default class CheckboxButton extends SvelteComponentTyped<CheckboxButtonProps_, CheckboxButtonEvents, CheckboxButtonSlots> {
+}

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

@@ -0,0 +1,3 @@
+import type { CheckboxButtonProps } from "./type";
+import CheckboxButton from "./CheckboxButton.svelte";
+export { CheckboxButton, type CheckboxButtonProps };

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

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

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

@@ -0,0 +1,25 @@
+export declare const checkButton: 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/checkbox-button/theme.js

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

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

@@ -0,0 +1,14 @@
+import type { ButtonProps } from "../../buttons";
+import type { HTMLInputAttributes } from "svelte/elements";
+interface CheckboxButtonProps extends Omit<HTMLInputAttributes, "size"> {
+    group?: (string | number)[];
+    value?: string | number;
+    checked?: boolean | undefined;
+    inline?: boolean;
+    pill?: boolean;
+    outline?: boolean;
+    size?: ButtonProps["size"];
+    color?: ButtonProps["color"];
+    shadow?: boolean;
+}
+export { type CheckboxButtonProps };

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

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