@pajohns/flowbite-svelte 0.1.0

package/dist/forms/timepicker/theme.js

@@ -0,0 +1,72 @@
+import { tv } from "tailwind-variants";
+export const timepicker = tv({
+    slots: {
+        buttonGroup: "inline-flex rounded-lg shadow-sm relative",
+        input: "block disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right focus:ring-0 focus:outline-none",
+        inputWithIcon: "relative px-2 pr-8",
+        iconWrapper: "pointer-events-none absolute inset-y-0 end-0 top-0 flex items-center pe-3.5",
+        icon: "h-4 w-4 text-gray-500 dark:text-gray-400",
+        select: "text-gray-900 disabled:text-gray-400 bg-gray-50 border border-gray-300 focus:ring-0 focus:outline-none block w-full border-l-1 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:disabled:text-gray-500 dark:focus:ring-primary-500 dark:focus:border-primary-500",
+        button: "!rounded-r-lg",
+        buttonIcon: "ml-2 h-4 w-4",
+        rangeSeparator: "flex items-center justify-center px-2 text-gray-500 dark:text-gray-400",
+        rangeInputWrapper: "relative",
+        rangeInput: "relative pr-8",
+        rangeButton: "pointer-events-none absolute inset-y-0 top-0 right-0 flex items-center border-0 bg-transparent pe-3.5",
+        dropdownContent: "p-4 last:rounded-r-lg",
+        dropdownInner: "flex flex-col space-y-4",
+        dropdownTimeRow: "flex space-x-4",
+        dropdownTimeCol: "flex flex-col",
+        dropdownTimeInput: "w-24 rounded-l-lg !border-r px-2",
+        dropdownButton: "w-full !rounded-l-lg",
+        toggleWrapper: "flex w-full flex-col space-y-2",
+        toggleRow: "flex items-center justify-between",
+        toggleTimeRow: "flex space-x-4 p-2.5",
+        toggleTimeCol: "flex flex-col",
+        toggleTimeInput: "w-24 rounded-lg !border-r px-2",
+        inlineGrid: "grid w-full gap-2",
+        inlineButton: "rounded-lg"
+    },
+    variants: {
+        type: {
+            default: {
+                input: "rounded-e-lg"
+            },
+            select: {
+                input: "w-1/3 rounded-l-lg rounded-e-none",
+                select: "rounded-r-lg rounded-l-none"
+            },
+            dropdown: {
+                input: "rounded-l-lg rounded-e-none"
+            },
+            range: {},
+            "timerange-dropdown": {},
+            "timerange-toggle": {},
+            "inline-buttons": {}
+        },
+        columns: {
+            1: {
+                inlineGrid: "grid-cols-1"
+            },
+            2: {
+                inlineGrid: "grid-cols-2"
+            },
+            3: {
+                inlineGrid: "grid-cols-3"
+            },
+            4: {
+                inlineGrid: "grid-cols-4"
+            }
+        },
+        disabled: {
+            true: {
+                input: "disabled:cursor-not-allowed disabled:opacity-50"
+            }
+        }
+    },
+    defaultVariants: {
+        type: "default",
+        columns: 2,
+        disabled: false
+    }
+});

package/dist/forms/toggle/Toggle.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { toggle } from "./theme";
+  import clsx from "clsx";
+  import type { ToggleProps } from "../..";
+  import Label from "../label/Label.svelte";
+  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { untrack } from "svelte";
+
+  let { children, size = "default", value, checked = $bindable(), disabled, color = "primary", class: className, classes, inputClass, spanClass, offLabel, ...restProps }: ToggleProps = $props();
+
+  warnThemeDeprecation(
+    "Toggle",
+    untrack(() => ({ inputClass, spanClass })),
+    { inputClass: "input", spanClass: "span" }
+  );
+
+  const styling = $derived(classes ?? { input: inputClass, span: spanClass });
+
+  const theme = $derived(getTheme("toggle"));
+
+  const { input, label, span } = $derived(toggle({ color, checked, size, disabled, off_state_label: !!offLabel }));
+</script>
+
+<Label class={label({ class: clsx(theme?.label, className) })}>
+  {#if offLabel}
+    {@render offLabel()}
+  {/if}
+  <input type="checkbox" bind:checked {value} {...restProps} {disabled} class={input({ class: clsx(theme?.input, styling.input) })} />
+  <span class={span({ class: clsx(theme?.span, styling.span) })}></span>
+  {#if children}
+    {@render children()}
+  {/if}
+</Label>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1071)
+## Props
+@prop children
+@prop size = "default"
+@prop value
+@prop checked = $bindable()
+@prop disabled
+@prop color = "primary"
+@prop class: className
+@prop classes
+@prop inputClass
+@prop spanClass
+@prop offLabel
+@prop ...restProps
+-->

package/dist/forms/toggle/Toggle.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { ToggleProps } from "../..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1071)
+ * ## Props
+ * @prop children
+ * @prop size = "default"
+ * @prop value
+ * @prop checked = $bindable()
+ * @prop disabled
+ * @prop color = "primary"
+ * @prop class: className
+ * @prop classes
+ * @prop inputClass
+ * @prop spanClass
+ * @prop offLabel
+ * @prop ...restProps
+ */
+declare const Toggle: import("svelte").Component<ToggleProps, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

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

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

package/dist/forms/toggle/index.js

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

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

@@ -0,0 +1,280 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../../theme/themeUtils";
+export type ToggleVariants = VariantProps<typeof toggle> & Classes<typeof toggle>;
+export declare const toggle: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            label: string;
+        };
+    };
+    checked: {
+        true: string;
+        false: string;
+    };
+    off_state_label: {
+        true: {
+            span: string;
+        };
+    };
+    color: {
+        primary: {
+            span: string;
+        };
+        secondary: {
+            span: string;
+        };
+        gray: {
+            span: string;
+        };
+        red: {
+            span: string;
+        };
+        orange: {
+            span: string;
+        };
+        amber: {
+            span: string;
+        };
+        yellow: {
+            span: string;
+        };
+        lime: {
+            span: string;
+        };
+        green: {
+            span: string;
+        };
+        emerald: {
+            span: string;
+        };
+        teal: {
+            span: string;
+        };
+        cyan: {
+            span: string;
+        };
+        sky: {
+            span: string;
+        };
+        blue: {
+            span: string;
+        };
+        indigo: {
+            span: string;
+        };
+        violet: {
+            span: string;
+        };
+        purple: {
+            span: string;
+        };
+        fuchsia: {
+            span: string;
+        };
+        pink: {
+            span: string;
+        };
+        rose: {
+            span: string;
+        };
+    };
+    size: {
+        small: {
+            span: string;
+        };
+        default: {
+            span: string;
+        };
+        large: {
+            span: string;
+        };
+    };
+}, {
+    span: string;
+    label: string;
+    input: string;
+}, undefined, {
+    disabled: {
+        true: {
+            label: string;
+        };
+    };
+    checked: {
+        true: string;
+        false: string;
+    };
+    off_state_label: {
+        true: {
+            span: string;
+        };
+    };
+    color: {
+        primary: {
+            span: string;
+        };
+        secondary: {
+            span: string;
+        };
+        gray: {
+            span: string;
+        };
+        red: {
+            span: string;
+        };
+        orange: {
+            span: string;
+        };
+        amber: {
+            span: string;
+        };
+        yellow: {
+            span: string;
+        };
+        lime: {
+            span: string;
+        };
+        green: {
+            span: string;
+        };
+        emerald: {
+            span: string;
+        };
+        teal: {
+            span: string;
+        };
+        cyan: {
+            span: string;
+        };
+        sky: {
+            span: string;
+        };
+        blue: {
+            span: string;
+        };
+        indigo: {
+            span: string;
+        };
+        violet: {
+            span: string;
+        };
+        purple: {
+            span: string;
+        };
+        fuchsia: {
+            span: string;
+        };
+        pink: {
+            span: string;
+        };
+        rose: {
+            span: string;
+        };
+    };
+    size: {
+        small: {
+            span: string;
+        };
+        default: {
+            span: string;
+        };
+        large: {
+            span: string;
+        };
+    };
+}, {
+    span: string;
+    label: string;
+    input: string;
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            label: string;
+        };
+    };
+    checked: {
+        true: string;
+        false: string;
+    };
+    off_state_label: {
+        true: {
+            span: string;
+        };
+    };
+    color: {
+        primary: {
+            span: string;
+        };
+        secondary: {
+            span: string;
+        };
+        gray: {
+            span: string;
+        };
+        red: {
+            span: string;
+        };
+        orange: {
+            span: string;
+        };
+        amber: {
+            span: string;
+        };
+        yellow: {
+            span: string;
+        };
+        lime: {
+            span: string;
+        };
+        green: {
+            span: string;
+        };
+        emerald: {
+            span: string;
+        };
+        teal: {
+            span: string;
+        };
+        cyan: {
+            span: string;
+        };
+        sky: {
+            span: string;
+        };
+        blue: {
+            span: string;
+        };
+        indigo: {
+            span: string;
+        };
+        violet: {
+            span: string;
+        };
+        purple: {
+            span: string;
+        };
+        fuchsia: {
+            span: string;
+        };
+        pink: {
+            span: string;
+        };
+        rose: {
+            span: string;
+        };
+    };
+    size: {
+        small: {
+            span: string;
+        };
+        default: {
+            span: string;
+        };
+        large: {
+            span: string;
+        };
+    };
+}, {
+    span: string;
+    label: string;
+    input: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/forms/toggle/theme.js

@@ -0,0 +1,97 @@
+import { tv } from "tailwind-variants";
+export const toggle = tv({
+    slots: {
+        span: "me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full peer-checked:rtl:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:bg-gray-600 dark:border-gray-500 relative ",
+        label: "flex items-center",
+        input: "w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 rounded-sm dark:bg-gray-700 dark:border-gray-600 sr-only peer"
+    },
+    variants: {
+        disabled: {
+            true: { label: "cursor-not-allowed opacity-50" }
+        },
+        checked: {
+            true: "",
+            false: ""
+        },
+        off_state_label: {
+            true: { span: "ms-3" }
+        },
+        color: {
+            // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+            primary: {
+                span: "peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600"
+            },
+            secondary: {
+                span: "peer-focus:ring-secondary-300 dark:peer-focus:ring-secondary-800 peer-checked:bg-secondary-600"
+            },
+            gray: {
+                span: "peer-focus:ring-gray-300 dark:peer-focus:ring-gray-800 peer-checked:bg-gray-500"
+            },
+            red: {
+                span: "peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600"
+            },
+            orange: {
+                span: "peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:bg-orange-500"
+            },
+            amber: {
+                span: "peer-focus:ring-amber-300 dark:peer-focus:ring-amber-800 peer-checked:bg-amber-600"
+            },
+            yellow: {
+                span: "peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-400"
+            },
+            lime: {
+                span: "peer-focus:ring-lime-300 dark:peer-focus:ring-lime-800 peer-checked:bg-lime-500"
+            },
+            green: {
+                span: "peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600"
+            },
+            emerald: {
+                span: "peer-focus:ring-emerald-300 dark:peer-focus:ring-emerald-800 peer-checked:bg-emerald-600"
+            },
+            teal: {
+                span: "peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600"
+            },
+            cyan: {
+                span: "peer-focus:ring-cyan-300 dark:peer-focus:ring-cyan-800 peer-checked:bg-cyan-600"
+            },
+            sky: {
+                span: "peer-focus:ring-sky-300 dark:peer-focus:ring-sky-800 peer-checked:bg-sky-600"
+            },
+            blue: {
+                span: "peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600"
+            },
+            indigo: {
+                span: "peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 peer-checked:bg-indigo-600"
+            },
+            violet: {
+                span: "peer-focus:ring-violet-300 dark:peer-focus:ring-violet-800 peer-checked:bg-violet-600"
+            },
+            purple: {
+                span: "peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600"
+            },
+            fuchsia: {
+                span: "peer-focus:ring-fuchsia-300 dark:peer-focus:ring-fuchsia-800 peer-checked:bg-fuchsia-600"
+            },
+            pink: {
+                span: "peer-focus:ring-pink-300 dark:peer-focus:ring-pink-800 peer-checked:bg-pink-600"
+            },
+            rose: {
+                span: "peer-focus:ring-rose-300 dark:peer-focus:ring-rose-800 peer-checked:bg-rose-600"
+            }
+        },
+        size: {
+            small: {
+                span: "w-9 h-5 after:top-[2px] after:start-[2px] after:h-4 after:w-4"
+            },
+            default: {
+                span: "w-11 h-6 after:top-0.5 after:start-[2px] after:h-5 after:w-5"
+            },
+            large: {
+                span: "w-14 h-7 after:top-0.5 after:start-[4px]  after:h-6 after:w-6"
+            }
+        }
+    },
+    defaultVariants: {
+        color: "primary"
+    }
+});

package/dist/gallery/Gallery.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { gallery } from "./theme";
+  import clsx from "clsx";
+  import type { GalleryProps, ImgType } from "..";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
+
+  let { children, figure, items = [], imgClass, class: className, classes, ...restProps }: GalleryProps = $props();
+
+  warnThemeDeprecation(
+    "Gallery",
+    untrack(() => ({ imgClass })),
+    { imgClass: "image" }
+  );
+
+  const styling = $derived(classes ?? { image: imgClass });
+
+  const theme = $derived(getTheme("gallery"));
+
+  function init(node: HTMLElement) {
+    if (getComputedStyle(node).gap === "normal") node.style.gap = "inherit";
+  }
+
+  const { image, div } = gallery();
+</script>
+
+{#snippet _figure(item: ImgType)}
+  <div>
+    <img src={item.src} alt={item.alt} class={image({ class: clsx(theme?.image, styling.image) })} {...restProps} />
+  </div>
+{/snippet}
+
+<div class={div({ class: clsx(theme?.div, className) })} use:init>
+  {#each items as item, i (item.src || i)}
+    {#if figure}
+      {@render figure(item as ImgType)}
+    {:else}
+      {@render _figure(item as ImgType)}
+    {/if}
+  {:else}
+    {#if children}
+      {@render children()}
+    {/if}
+  {/each}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1088)
+## Props
+@prop children
+@prop figure
+@prop items = []
+@prop imgClass
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

package/dist/gallery/Gallery.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { GalleryProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1088)
+ * ## Props
+ * @prop children
+ * @prop figure
+ * @prop items = []
+ * @prop imgClass
+ * @prop class: className
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const Gallery: import("svelte").Component<GalleryProps, {}, "">;
+type Gallery = ReturnType<typeof Gallery>;
+export default Gallery;

package/dist/gallery/index.d.ts

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

package/dist/gallery/index.js

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

package/dist/gallery/theme.d.ts

@@ -0,0 +1,34 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type GalleryVariants = VariantProps<typeof gallery> & Classes<typeof gallery>;
+export declare const gallery: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            image?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            image?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    image: string;
+    div: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            image?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    image: string;
+    div: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    image: string;
+    div: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/gallery/theme.js

@@ -0,0 +1,7 @@
+import { tv } from "tailwind-variants";
+export const gallery = tv({
+    slots: {
+        image: "h-auto max-w-full rounded-lg",
+        div: "grid"
+    }
+});