@pajohns/flowbite-svelte 0.1.0

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

@@ -0,0 +1,347 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../../theme/themeUtils";
+export declare const buttonToggleGroup: import("tailwind-variants").TVReturnType<{
+    roundedSize: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+}, undefined, "inline-flex border border-gray-300 overflow-hidden", {
+    roundedSize: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    roundedSize: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+}, undefined, "inline-flex border border-gray-300 overflow-hidden", unknown, unknown, undefined>>;
+export type ButtonToggleVariants = VariantProps<typeof buttonToggle> & Classes<typeof buttonToggle>;
+export declare const buttonToggle: import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            text: string;
+        };
+        false: {};
+    };
+    size: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+        xl: {
+            button: string;
+        };
+    };
+    roundedSize: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+        xl: {
+            button: string;
+        };
+        full: {
+            button: string;
+        };
+    };
+    color: {
+        primary: {
+            button: string;
+        };
+        secondary: {
+            button: string;
+        };
+        gray: {
+            button: string;
+        };
+        red: {
+            button: string;
+        };
+        orange: {
+            button: string;
+        };
+        amber: {
+            button: string;
+        };
+        yellow: {
+            button: string;
+        };
+        lime: {
+            button: string;
+        };
+        green: {
+            button: string;
+        };
+        emerald: {
+            button: string;
+        };
+        teal: {
+            button: string;
+        };
+        cyan: {
+            button: string;
+        };
+        sky: {
+            button: string;
+        };
+        blue: {
+            button: string;
+        };
+        indigo: {
+            button: string;
+        };
+        violet: {
+            button: string;
+        };
+        purple: {
+            button: string;
+        };
+        fuchsia: {
+            button: string;
+        };
+        pink: {
+            button: string;
+        };
+        rose: {
+            button: string;
+        };
+        none: {};
+    };
+}, {
+    button: string;
+    content: string;
+    text: string;
+    icon: string;
+}, undefined, {
+    selected: {
+        true: {
+            text: string;
+        };
+        false: {};
+    };
+    size: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+        xl: {
+            button: string;
+        };
+    };
+    roundedSize: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+        xl: {
+            button: string;
+        };
+        full: {
+            button: string;
+        };
+    };
+    color: {
+        primary: {
+            button: string;
+        };
+        secondary: {
+            button: string;
+        };
+        gray: {
+            button: string;
+        };
+        red: {
+            button: string;
+        };
+        orange: {
+            button: string;
+        };
+        amber: {
+            button: string;
+        };
+        yellow: {
+            button: string;
+        };
+        lime: {
+            button: string;
+        };
+        green: {
+            button: string;
+        };
+        emerald: {
+            button: string;
+        };
+        teal: {
+            button: string;
+        };
+        cyan: {
+            button: string;
+        };
+        sky: {
+            button: string;
+        };
+        blue: {
+            button: string;
+        };
+        indigo: {
+            button: string;
+        };
+        violet: {
+            button: string;
+        };
+        purple: {
+            button: string;
+        };
+        fuchsia: {
+            button: string;
+        };
+        pink: {
+            button: string;
+        };
+        rose: {
+            button: string;
+        };
+        none: {};
+    };
+}, {
+    button: string;
+    content: string;
+    text: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            text: string;
+        };
+        false: {};
+    };
+    size: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+        xl: {
+            button: string;
+        };
+    };
+    roundedSize: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+        xl: {
+            button: string;
+        };
+        full: {
+            button: string;
+        };
+    };
+    color: {
+        primary: {
+            button: string;
+        };
+        secondary: {
+            button: string;
+        };
+        gray: {
+            button: string;
+        };
+        red: {
+            button: string;
+        };
+        orange: {
+            button: string;
+        };
+        amber: {
+            button: string;
+        };
+        yellow: {
+            button: string;
+        };
+        lime: {
+            button: string;
+        };
+        green: {
+            button: string;
+        };
+        emerald: {
+            button: string;
+        };
+        teal: {
+            button: string;
+        };
+        cyan: {
+            button: string;
+        };
+        sky: {
+            button: string;
+        };
+        blue: {
+            button: string;
+        };
+        indigo: {
+            button: string;
+        };
+        violet: {
+            button: string;
+        };
+        purple: {
+            button: string;
+        };
+        fuchsia: {
+            button: string;
+        };
+        pink: {
+            button: string;
+        };
+        rose: {
+            button: string;
+        };
+        none: {};
+    };
+}, {
+    button: string;
+    content: string;
+    text: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,129 @@
+import { tv } from "tailwind-variants";
+export const buttonToggleGroup = tv({
+    base: "inline-flex border border-gray-300 overflow-hidden",
+    variants: {
+        roundedSize: {
+            sm: "rounded-sm",
+            md: "rounded-md",
+            lg: "rounded-lg",
+            xl: "rounded-xl",
+            full: "rounded-full"
+        }
+    }
+});
+export const buttonToggle = tv({
+    slots: {
+        button: "relative flex items-center transition-all duration-200 focus:outline-none border-r last:border-r-0 dark:bg-white dark:text-gray-800 disabled:cursor-not-allowed disabled:opacity-50",
+        content: "flex items-center w-full overflow-hidden relative",
+        text: "transition-all duration-200 ml-0",
+        icon: "absolute left-0 flex-shrink-0 text-green-600"
+    },
+    variants: {
+        selected: {
+            true: {
+                text: "ml-5"
+            },
+            false: {}
+        },
+        size: {
+            sm: {
+                button: "p-1 px-2 text-sm"
+            },
+            md: {
+                button: "p-2 px-4 text-base"
+            },
+            lg: {
+                button: "p-3 px-5 text-lg"
+            },
+            xl: {
+                button: "p-4 px-6 text-xl"
+            }
+        },
+        roundedSize: {
+            sm: {
+                button: "first:rounded-s-sm last:rounded-e-sm"
+            },
+            md: {
+                button: "first:rounded-s-md last:rounded-e-md"
+            },
+            lg: {
+                button: "first:rounded-s-lg last:rounded-e-lg"
+            },
+            xl: {
+                button: "first:rounded-s-xl last:rounded-e-xl"
+            },
+            full: {
+                button: "first:rounded-s-full last:rounded-e-full"
+            }
+        },
+        color: {
+            primary: {
+                button: "data-[selected=true]:bg-primary-200 data-[selected=false]:hover:bg-gray-100"
+            },
+            secondary: {
+                button: "data-[selected=true]:bg-secondary-200 data-[selected=false]:hover:bg-gray-100"
+            },
+            gray: {
+                button: "data-[selected=true]:bg-gray-200 data-[selected=false]:hover:bg-gray-100"
+            },
+            red: {
+                button: "data-[selected=true]:bg-red-200 data-[selected=false]:hover:bg-red-50"
+            },
+            orange: {
+                button: "data-[selected=true]:bg-orange-200 data-[selected=false]:hover:bg-orange-50"
+            },
+            amber: {
+                button: "data-[selected=true]:bg-amber-200 data-[selected=false]:hover:bg-amber-50"
+            },
+            yellow: {
+                button: "data-[selected=true]:bg-yellow-200 data-[selected=false]:hover:bg-yellow-50"
+            },
+            lime: {
+                button: "data-[selected=true]:bg-lime-200 data-[selected=false]:hover:bg-lime-50"
+            },
+            green: {
+                button: "data-[selected=true]:bg-green-200 data-[selected=false]:hover:bg-green-50"
+            },
+            emerald: {
+                button: "data-[selected=true]:bg-emerald-200 data-[selected=false]:hover:bg-emerald-50"
+            },
+            teal: {
+                button: "data-[selected=true]:bg-teal-200 data-[selected=false]:hover:bg-teal-50"
+            },
+            cyan: {
+                button: "data-[selected=true]:bg-cyan-200 data-[selected=false]:hover:bg-cyan-50"
+            },
+            sky: {
+                button: "data-[selected=true]:bg-sky-200 data-[selected=false]:hover:bg-sky-50"
+            },
+            blue: {
+                button: "data-[selected=true]:bg-blue-200 data-[selected=false]:hover:bg-blue-50"
+            },
+            indigo: {
+                button: "data-[selected=true]:bg-indigo-200 data-[selected=false]:hover:bg-indigo-50"
+            },
+            violet: {
+                button: "data-[selected=true]:bg-violet-200 data-[selected=false]:hover:bg-violet-50"
+            },
+            purple: {
+                button: "data-[selected=true]:bg-purple-200 data-[selected=false]:hover:bg-purple-50"
+            },
+            fuchsia: {
+                button: "data-[selected=true]:bg-fuchsia-200 data-[selected=false]:hover:bg-fuchsia-50"
+            },
+            pink: {
+                button: "data-[selected=true]:bg-pink-200 data-[selected=false]:hover:bg-pink-50"
+            },
+            rose: {
+                button: "data-[selected=true]:bg-rose-200 data-[selected=false]:hover:bg-rose-50"
+            },
+            none: {}
+        }
+    },
+    defaultVariants: {
+        selected: false,
+        color: "primary",
+        size: "md",
+        roundedSize: "md"
+    }
+});

package/dist/forms/checkbox/Checkbox.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { checkbox } from "./theme";
+  import clsx from "clsx";
+  import { type CheckboxProps } from "../..";
+  import Label from "../label/Label.svelte";
+  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { untrack } from "svelte";
+
+  let {
+    children,
+    color = "primary",
+    custom,
+    inline,
+    tinted,
+    rounded,
+    group = $bindable([]),
+    choices = [],
+    checked = $bindable(false),
+    classes,
+    class: className,
+    divClass,
+    disabled,
+    value,
+    labelProps = {},
+    ...restProps
+  }: CheckboxProps = $props();
+
+  warnThemeDeprecation(
+    "Checkbox",
+    untrack(() => ({ divClass })),
+    { divClass: "div" }
+  );
+
+  const styling = $derived(classes ?? { div: divClass });
+
+  const theme = $derived(getTheme("checkbox"));
+
+  const { base, div: divStyle } = $derived(checkbox({ color, tinted, custom, rounded, inline, disabled: disabled ?? false }));
+
+  $effect(() => {
+    if (value !== undefined && Array.isArray(group)) {
+      checked = group.includes(value);
+    }
+  });
+
+  $effect(() => {
+    if (value === undefined || !Array.isArray(group)) 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);
+      }
+    } else {
+      if (index >= 0) {
+        group.splice(index, 1);
+      }
+    }
+  });
+</script>
+
+{#if choices.length > 0}
+  {#each choices as choice, i (choice.value ?? i)}
+    <Label show={!!children || !!choice.label} {...labelProps} class={divStyle({ class: clsx(theme?.div, styling.div) })}>
+      <input type="checkbox" value={choice.value} checked={choice.checked ?? false} {disabled} bind:group {...restProps} class={base({ class: clsx(theme?.base, className) })} />
+      {#if children}
+        {@render children({ value: choice.value, checked: choice.checked, disabled })}
+      {:else}
+        {choice.label}
+      {/if}
+    </Label>
+  {/each}
+{:else}
+  <Label show={!!children} {...labelProps} class={divStyle({ class: clsx(theme?.div, styling.div) })}>
+    <input type="checkbox" {value} bind:checked {disabled} {...restProps} class={base({ class: clsx(theme?.base, className) })} />
+    {#if children}
+      {@render children({ value, checked, disabled })}
+    {/if}
+  </Label>
+{/if}

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

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

package/dist/forms/checkbox/CheckboxButton.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { CheckboxButtonProps } from "../..";
+  import Button from "../../buttons/Button.svelte";
+  import { getTheme } from "../../theme/themeUtils";
+  import clsx from "clsx";
+  import Checkbox from "./Checkbox.svelte";
+  import { checkboxButton } from "./theme";
+
+  let { children, class: className, group = $bindable(), checked = $bindable(false), inline, pill, outline, size, color, shadow, ...restProps }: CheckboxButtonProps = $props();
+
+  const theme = $derived(getTheme("checkboxButton"));
+
+  let buttonClass: string = $derived(checkboxButton({ inline, checked, class: clsx(theme, className) }));
+</script>
+
+<Button tag="label" {pill} {outline} {size} {color} {shadow} class={buttonClass}>
+  <Checkbox bind:group bind:checked {...restProps} class="sr-only"></Checkbox>
+  {@render children?.()}
+</Button>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L792)
+## Props
+@prop children
+@prop class: className
+@prop group = $bindable()
+@prop checked = $bindable(false)
+@prop inline
+@prop pill
+@prop outline
+@prop size
+@prop color
+@prop shadow
+@prop ...restProps
+-->

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

@@ -0,0 +1,21 @@
+import type { CheckboxButtonProps } from "../..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L792)
+ * ## Props
+ * @prop children
+ * @prop class: className
+ * @prop group = $bindable()
+ * @prop checked = $bindable(false)
+ * @prop inline
+ * @prop pill
+ * @prop outline
+ * @prop size
+ * @prop color
+ * @prop shadow
+ * @prop ...restProps
+ */
+declare const CheckboxButton: import("svelte").Component<CheckboxButtonProps, {}, "group" | "checked">;
+type CheckboxButton = ReturnType<typeof CheckboxButton>;
+export default CheckboxButton;

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

@@ -0,0 +1,3 @@
+export { default as Checkbox } from "./Checkbox.svelte";
+export { default as CheckboxButton } from "./CheckboxButton.svelte";
+export { checkbox, checkboxButton } from "./theme";

package/dist/forms/checkbox/index.js

@@ -0,0 +1,3 @@
+export { default as Checkbox } from "./Checkbox.svelte";
+export { default as CheckboxButton } from "./CheckboxButton.svelte";
+export { checkbox, checkboxButton } from "./theme";