@pajohns/flowbite-svelte 0.1.0

package/dist/toast/Toast.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import CloseButton from "../utils/CloseButton.svelte";
+  import type { ParamsType, ToastProps } from "../types";
+  import { toast } from "./theme";
+  import { fly } from "svelte/transition";
+  import clsx from "clsx";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { createDismissableContext } from "../utils/dismissable";
+  import { untrack } from "svelte";
+
+  let {
+    children,
+    icon,
+    toastStatus = $bindable(true),
+    dismissable = true,
+    color = "primary",
+    position,
+    iconClass,
+    contentClass,
+    align = true,
+    params,
+    transition = fly,
+    class: className,
+    classes,
+    ...restProps
+  }: ToastProps = $props();
+
+  warnThemeDeprecation(
+    "Toast",
+    untrack(() => ({ iconClass, contentClass })),
+    {
+      iconClass: "icon",
+      contentClass: "content"
+    }
+  );
+
+  const styling = $derived(
+    classes ?? {
+      icon: iconClass,
+      content: contentClass
+    }
+  );
+
+  const theme = $derived(getTheme("toast"));
+
+  const { base, icon: iconVariants, content, close } = $derived(toast({ color, position, align }));
+
+  let ref: HTMLDivElement | undefined = $state(undefined);
+
+  function _close() {
+    if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
+      toastStatus = false;
+    }
+  }
+
+  createDismissableContext(_close);
+</script>
+
+{#if toastStatus}
+  <div role="alert" bind:this={ref} transition:transition={params as ParamsType} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+    {#if icon}
+      <div class={iconVariants({ class: clsx(theme?.icon, styling.icon) })}>
+        {@render icon()}
+      </div>
+    {/if}
+
+    <div class={content({ class: clsx(theme?.content, styling.content) })}>
+      {@render children()}
+    </div>
+
+    {#if dismissable}
+      <CloseButton class={close({ class: clsx(theme?.close, classes?.close) })} ariaLabel="Remove toast" {color} />
+    {/if}
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1979)
+## Props
+@prop children
+@prop icon
+@prop toastStatus = $bindable(true)
+@prop dismissable = true
+@prop color = "primary"
+@prop position
+@prop iconClass
+@prop contentClass
+@prop align = true
+@prop params
+@prop transition = fly
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

package/dist/toast/Toast.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { ToastProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1979)
+ * ## Props
+ * @prop children
+ * @prop icon
+ * @prop toastStatus = $bindable(true)
+ * @prop dismissable = true
+ * @prop color = "primary"
+ * @prop position
+ * @prop iconClass
+ * @prop contentClass
+ * @prop align = true
+ * @prop params
+ * @prop transition = fly
+ * @prop class: className
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const Toast: import("svelte").Component<ToastProps, {}, "toastStatus">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/toast/ToastContainer.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { ToastContainerProps } from "../types";
+  import clsx from "clsx";
+  import { toastContainer } from "./theme";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { children, position = "top-right", class: className, ...restProps }: ToastContainerProps = $props();
+
+  const theme = $derived(getTheme("toastContainer"));
+
+  const positionClasses = {
+    "top-left": "top-4 left-4",
+    "top-right": "top-4 right-4",
+    "bottom-left": "bottom-4 left-4",
+    "bottom-right": "bottom-4 right-4"
+  };
+
+  const base = $derived(toastContainer({ class: clsx(positionClasses[position], theme, className) }));
+</script>
+
+<div {...restProps} class={base}>
+  {@render children()}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ToastContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1994)
+## Props
+@prop children
+@prop position = "top-right"
+@prop class: className
+@prop ...restProps
+-->

package/dist/toast/ToastContainer.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ToastContainerProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ToastContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1994)
+ * ## Props
+ * @prop children
+ * @prop position = "top-right"
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const ToastContainer: import("svelte").Component<ToastContainerProps, {}, "">;
+type ToastContainer = ReturnType<typeof ToastContainer>;
+export default ToastContainer;

package/dist/toast/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Toast } from "./Toast.svelte";
+export { default as ToastContainer } from "./ToastContainer.svelte";
+export { toast, toastContainer } from "./theme";

package/dist/toast/index.js

@@ -0,0 +1,3 @@
+export { default as Toast } from "./Toast.svelte";
+export { default as ToastContainer } from "./ToastContainer.svelte";
+export { toast, toastContainer } from "./theme";

package/dist/toast/theme.d.ts

@@ -0,0 +1,323 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type ToastVaraints = VariantProps<typeof toast> & Classes<typeof toast>;
+export declare const toast: import("tailwind-variants").TVReturnType<{
+    position: {
+        "top-left": {
+            base: string;
+        };
+        "top-right": {
+            base: string;
+        };
+        "bottom-left": {
+            base: string;
+        };
+        "bottom-right": {
+            base: string;
+        };
+    };
+    color: {
+        primary: {
+            icon: string;
+            close: string;
+        };
+        gray: {
+            icon: string;
+            close: string;
+        };
+        red: {
+            icon: string;
+            close: string;
+        };
+        orange: {
+            icon: string;
+            close: string;
+        };
+        amber: {
+            icon: string;
+            close: string;
+        };
+        yellow: {
+            icon: string;
+            close: string;
+        };
+        lime: {
+            icon: string;
+            close: string;
+        };
+        green: {
+            icon: string;
+            close: string;
+        };
+        emerald: {
+            icon: string;
+            close: string;
+        };
+        teal: {
+            icon: string;
+            close: string;
+        };
+        cyan: {
+            icon: string;
+            close: string;
+        };
+        sky: {
+            icon: string;
+            close: string;
+        };
+        blue: {
+            icon: string;
+            close: string;
+        };
+        indigo: {
+            icon: string;
+            close: string;
+        };
+        violet: {
+            icon: string;
+            close: string;
+        };
+        purple: {
+            icon: string;
+            close: string;
+        };
+        fuchsia: {
+            icon: string;
+            close: string;
+        };
+        pink: {
+            icon: string;
+            close: string;
+        };
+        rose: {
+            icon: string;
+            close: string;
+        };
+    };
+    align: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+    content: string;
+    close: string;
+}, undefined, {
+    position: {
+        "top-left": {
+            base: string;
+        };
+        "top-right": {
+            base: string;
+        };
+        "bottom-left": {
+            base: string;
+        };
+        "bottom-right": {
+            base: string;
+        };
+    };
+    color: {
+        primary: {
+            icon: string;
+            close: string;
+        };
+        gray: {
+            icon: string;
+            close: string;
+        };
+        red: {
+            icon: string;
+            close: string;
+        };
+        orange: {
+            icon: string;
+            close: string;
+        };
+        amber: {
+            icon: string;
+            close: string;
+        };
+        yellow: {
+            icon: string;
+            close: string;
+        };
+        lime: {
+            icon: string;
+            close: string;
+        };
+        green: {
+            icon: string;
+            close: string;
+        };
+        emerald: {
+            icon: string;
+            close: string;
+        };
+        teal: {
+            icon: string;
+            close: string;
+        };
+        cyan: {
+            icon: string;
+            close: string;
+        };
+        sky: {
+            icon: string;
+            close: string;
+        };
+        blue: {
+            icon: string;
+            close: string;
+        };
+        indigo: {
+            icon: string;
+            close: string;
+        };
+        violet: {
+            icon: string;
+            close: string;
+        };
+        purple: {
+            icon: string;
+            close: string;
+        };
+        fuchsia: {
+            icon: string;
+            close: string;
+        };
+        pink: {
+            icon: string;
+            close: string;
+        };
+        rose: {
+            icon: string;
+            close: string;
+        };
+    };
+    align: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+    content: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{
+    position: {
+        "top-left": {
+            base: string;
+        };
+        "top-right": {
+            base: string;
+        };
+        "bottom-left": {
+            base: string;
+        };
+        "bottom-right": {
+            base: string;
+        };
+    };
+    color: {
+        primary: {
+            icon: string;
+            close: string;
+        };
+        gray: {
+            icon: string;
+            close: string;
+        };
+        red: {
+            icon: string;
+            close: string;
+        };
+        orange: {
+            icon: string;
+            close: string;
+        };
+        amber: {
+            icon: string;
+            close: string;
+        };
+        yellow: {
+            icon: string;
+            close: string;
+        };
+        lime: {
+            icon: string;
+            close: string;
+        };
+        green: {
+            icon: string;
+            close: string;
+        };
+        emerald: {
+            icon: string;
+            close: string;
+        };
+        teal: {
+            icon: string;
+            close: string;
+        };
+        cyan: {
+            icon: string;
+            close: string;
+        };
+        sky: {
+            icon: string;
+            close: string;
+        };
+        blue: {
+            icon: string;
+            close: string;
+        };
+        indigo: {
+            icon: string;
+            close: string;
+        };
+        violet: {
+            icon: string;
+            close: string;
+        };
+        purple: {
+            icon: string;
+            close: string;
+        };
+        fuchsia: {
+            icon: string;
+            close: string;
+        };
+        pink: {
+            icon: string;
+            close: string;
+        };
+        rose: {
+            icon: string;
+            close: string;
+        };
+    };
+    align: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+    content: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const toastContainer: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "fixed z-50 space-y-3", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "fixed z-50 space-y-3", unknown, unknown, undefined>>;

package/dist/toast/theme.js

@@ -0,0 +1,103 @@
+import { tv } from "tailwind-variants";
+export const toast = tv({
+    slots: {
+        base: "flex w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 gap-3",
+        icon: "w-8 h-8 inline-flex items-center justify-center shrink-0 rounded-lg",
+        content: "w-full text-sm font-normal",
+        close: "ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
+    },
+    variants: {
+        position: {
+            "top-left": { base: "absolute top-5 start-5" },
+            "top-right": { base: "absolute top-5 end-5" },
+            "bottom-left": { base: "absolute bottom-5 start-5" },
+            "bottom-right": { base: "absolute bottom-5 end-5" }
+        },
+        color: {
+            // primary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+            primary: {
+                icon: "text-primary-500 bg-primary-100 dark:bg-primary-800 dark:text-primary-200",
+                close: "text-primary-500 dark:text-primary-200 hover:text-primary-600 dark:hover:text-primary-500"
+            },
+            gray: {
+                icon: "text-gray-500 bg-gray-100 dark:bg-gray-700 dark:text-gray-200",
+                close: "text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-500"
+            },
+            red: {
+                icon: "text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200",
+                close: "text-red-500 dark:text-red-200 hover:text-red-600 dark:hover:text-red-500"
+            },
+            orange: {
+                icon: "text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200",
+                close: "text-orange-500 dark:text-orange-200 hover:text-orange-600 dark:hover:text-orange-500"
+            },
+            amber: {
+                icon: "text-amber-500 bg-amber-100 dark:bg-amber-700 dark:text-amber-200",
+                close: "text-amber-500 dark:text-amber-200 hover:text-amber-600 dark:hover:text-amber-500"
+            },
+            yellow: {
+                icon: "text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200",
+                close: "text-yellow-500 dark:text-yellow-200 hover:text-yellow-600 dark:hover:text-yellow-500"
+            },
+            lime: {
+                icon: "text-lime-500 bg-lime-100 dark:bg-lime-700 dark:text-lime-200",
+                close: "text-lime-500 dark:text-lime-200 hover:text-lime-600 dark:hover:text-lime-500"
+            },
+            green: {
+                icon: "text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200",
+                close: "text-green-500 dark:text-green-200 hover:text-green-600 dark:hover:text-green-500"
+            },
+            emerald: {
+                icon: "text-emerald-500 bg-emerald-100 dark:bg-emerald-800 dark:text-emerald-200",
+                close: "text-emerald-500 dark:text-emerald-200 hover:text-emerald-600 dark:hover:text-emerald-500"
+            },
+            teal: {
+                icon: "text-teal-500 bg-teal-100 dark:bg-teal-800 dark:text-teal-200",
+                close: "text-teal-500 dark:text-teal-200 hover:text-teal-600 dark:hover:text-teal-500"
+            },
+            cyan: {
+                icon: "text-cyan-500 bg-cyan-100 dark:bg-cyan-800 dark:text-cyan-200",
+                close: "text-cyan-500 dark:text-cyan-200 hover:text-cyan-600 dark:hover:text-cyan-500"
+            },
+            sky: {
+                icon: "text-sky-500 bg-sky-100 dark:bg-sky-800 dark:text-sky-200",
+                close: "text-sky-500 dark:text-sky-200 hover:text-sky-600 dark:hover:text-sky-500"
+            },
+            blue: {
+                icon: "text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200",
+                close: "text-blue-500 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-500"
+            },
+            indigo: {
+                icon: "text-indigo-500 bg-indigo-100 dark:bg-indigo-800 dark:text-indigo-200",
+                close: "text-indigo-500 dark:text-indigo-200 hover:text-indigo-600 dark:hover:text-indigo-500"
+            },
+            violet: {
+                icon: "text-violet-500 bg-violet-100 dark:bg-violet-800 dark:text-violet-200",
+                close: "text-violet-500 dark:text-violet-200 hover:text-violet-600 dark:hover:text-violet-500"
+            },
+            purple: {
+                icon: "text-purple-500 bg-purple-100 dark:bg-purple-800 dark:text-purple-200",
+                close: "text-purple-500 dark:text-purple-200 hover:text-purple-600 dark:hover:text-purple-500"
+            },
+            fuchsia: {
+                icon: "text-fuchsia-500 bg-fuchsia-100 dark:bg-fuchsia-800 dark:text-fuchsia-200",
+                close: "text-fuchsia-500 dark:text-fuchsia-200 hover:text-fuchsia-600 dark:hover:text-fuchsia-500"
+            },
+            pink: {
+                icon: "text-pink-500 bg-pink-100 dark:bg-pink-700 dark:text-pink-200",
+                close: "text-pink-500 dark:text-pink-200 hover:text-pink-600 dark:hover:text-pink-500"
+            },
+            rose: {
+                icon: "text-rose-500 bg-rose-100 dark:bg-rose-700 dark:text-rose-200",
+                close: "text-rose-500 dark:text-rose-200 hover:text-rose-600 dark:hover:text-rose-500"
+            }
+        },
+        align: {
+            true: { base: "items-center" },
+            false: { base: "items-start" }
+        }
+    }
+});
+export const toastContainer = tv({
+    base: "fixed z-50 space-y-3"
+});

package/dist/toolbar/Toolbar.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { getTheme } from "../theme/themeUtils";
+  import type { ToolbarProps } from "../types";
+  import clsx from "clsx";
+  import { setToolbarContext } from "../context";
+  import { toolbar } from "./theme";
+
+  let { children, end, color, embedded, class: className, classes, ...restProps }: ToolbarProps = $props();
+
+  const theme = $derived(getTheme("toolbar"));
+
+  const context = $state({ separators: false });
+
+  // Create context object with getter
+  const ctx = {
+    get separators() {
+      return context.separators;
+    },
+    set separators(value: boolean) {
+      context.separators = value;
+    }
+  };
+
+  // Set context during initialization
+  setToolbarContext(ctx);
+
+  let frameColor = $derived(embedded ? "default" : color);
+
+  let { base, content } = $derived(
+    toolbar({
+      color: frameColor,
+      embedded,
+      separators: context.separators
+    })
+  );
+
+  // let separatorsClass: string = twMerge($separators && 'sm:divide-x rtl:divide-x-reverse');
+
+  // let divClass: string = twMerge('flex justify-between items-center', !embedded && 'py-2 px-3', className);
+</script>
+
+<div {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  <div class={content({ class: clsx(theme?.content, classes?.content) })}>
+    {@render children?.()}
+  </div>
+  {#if end}
+    {@render end()}
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ToolbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1230)
+## Props
+@prop children
+@prop end
+@prop color
+@prop embedded
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

package/dist/toolbar/Toolbar.svelte.d.ts

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