@pajohns/flowbite-svelte 0.1.0

package/dist/badge/theme.d.ts

@@ -0,0 +1,247 @@
+import type { Classes } from "../theme/themeUtils";
+import { type VariantProps } from "tailwind-variants";
+export type BadgeVariants = VariantProps<typeof badge> & Classes<typeof badge>;
+export declare const badge: 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;
+        };
+        fuchsia: {
+            base: string;
+        };
+        purple: {
+            base: string;
+        };
+        pink: {
+            base: string;
+        };
+        rose: {
+            base: string;
+        };
+    };
+    size: {
+        small: string;
+        large: string;
+    };
+    border: {
+        true: {
+            base: string;
+        };
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+        false: string;
+    };
+}, {
+    linkClass: string;
+    base: 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;
+        };
+        fuchsia: {
+            base: string;
+        };
+        purple: {
+            base: string;
+        };
+        pink: {
+            base: string;
+        };
+        rose: {
+            base: string;
+        };
+    };
+    size: {
+        small: string;
+        large: string;
+    };
+    border: {
+        true: {
+            base: string;
+        };
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+        false: string;
+    };
+}, {
+    linkClass: string;
+    base: 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;
+        };
+        fuchsia: {
+            base: string;
+        };
+        purple: {
+            base: string;
+        };
+        pink: {
+            base: string;
+        };
+        rose: {
+            base: string;
+        };
+    };
+    size: {
+        small: string;
+        large: string;
+    };
+    border: {
+        true: {
+            base: string;
+        };
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+        false: string;
+    };
+}, {
+    linkClass: string;
+    base: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/badge/theme.js

@@ -0,0 +1,250 @@
+import { tv } from "tailwind-variants";
+export const badge = tv({
+    slots: {
+        linkClass: "flex align-middle",
+        base: "font-medium inline-flex items-center justify-center px-2.5 py-0.5"
+    },
+    variants: {
+        color: {
+            // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+            primary: { base: "bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300" },
+            secondary: { base: "bg-secondary-100 text-secondary-800 dark:bg-secondary-900 dark:text-secondary-300" },
+            gray: { base: "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300" },
+            red: { base: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300" },
+            orange: { base: "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300" },
+            amber: { base: "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300" },
+            yellow: { base: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300" },
+            lime: { base: "bg-lime-100 text-lime-800 dark:bg-lime-900 dark:text-lime-300" },
+            green: { base: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300" },
+            emerald: { base: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300" },
+            teal: { base: "bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-300" },
+            cyan: { base: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-300" },
+            sky: { base: "bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-300" },
+            blue: { base: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300" },
+            indigo: { base: "bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300" },
+            violet: { base: "bg-violet-100 text-violet-800 dark:bg-violet-900 dark:text-violet-300" },
+            fuchsia: { base: "bg-fuchsia-100 text-fuchsia-800 dark:bg-fuchsia-900 dark:text-fuchsia-300" },
+            purple: { base: "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300" },
+            pink: { base: "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300" },
+            rose: { base: "bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-300" }
+        },
+        size: {
+            small: "text-xs",
+            large: "text-sm"
+        },
+        border: {
+            true: { base: "border" }
+        },
+        rounded: {
+            true: { base: "rounded-full" },
+            false: "rounded-sm"
+        }
+    },
+    compoundVariants: [
+        {
+            border: true,
+            color: "primary",
+            class: "dark:bg-transparent dark:text-primary-400 border-primary-400 dark:border-primary-400"
+        },
+        {
+            border: true,
+            color: "secondary",
+            class: "dark:bg-transparent dark:text-secondary-400 border-secondary-400 dark:border-secondary-400"
+        },
+        {
+            border: true,
+            color: "gray",
+            class: "dark:bg-transparent dark:text-gray-400 border-gray-400 dark:border-gray-400"
+        },
+        {
+            border: true,
+            color: "red",
+            class: "dark:bg-transparent dark:text-red-400 border-red-400 dark:border-red-400"
+        },
+        {
+            border: true,
+            color: "orange",
+            class: "dark:bg-transparent dark:text-orange-400 border-orange-400 dark:border-orange-400"
+        },
+        {
+            border: true,
+            color: "amber",
+            class: "dark:bg-transparent dark:text-amber-400 border-amber-400 dark:border-amber-400"
+        },
+        {
+            border: true,
+            color: "yellow",
+            class: "dark:bg-transparent dark:text-yellow-300 border-yellow-300 dark:border-yellow-300"
+        },
+        {
+            border: true,
+            color: "lime",
+            class: "dark:bg-transparent dark:text-lime-400 border-lime-400 dark:border-lime-400"
+        },
+        {
+            border: true,
+            color: "green",
+            class: "dark:bg-transparent dark:text-green-400 border-green-400 dark:border-green-400"
+        },
+        {
+            border: true,
+            color: "emerald",
+            class: "dark:bg-transparent dark:text-emerald-400 border-emerald-400 dark:border-emerald-400"
+        },
+        {
+            border: true,
+            color: "teal",
+            class: "dark:bg-transparent dark:text-teal-400 border-teal-400 dark:border-teal-400"
+        },
+        {
+            border: true,
+            color: "cyan",
+            class: "dark:bg-transparent dark:text-cyan-400 border-cyan-400 dark:border-cyan-400"
+        },
+        {
+            border: true,
+            color: "sky",
+            class: "dark:bg-transparent dark:text-sky-400 border-sky-400 dark:border-sky-400"
+        },
+        {
+            border: true,
+            color: "blue",
+            class: "dark:bg-transparent dark:text-blue-400 border-blue-400 dark:border-blue-400"
+        },
+        {
+            border: true,
+            color: "indigo",
+            class: "dark:bg-transparent dark:text-indigo-400 border-indigo-400 dark:border-indigo-400"
+        },
+        {
+            border: true,
+            color: "violet",
+            class: "dark:bg-transparent dark:text-violet-400 border-violet-400 dark:border-violet-400"
+        },
+        {
+            border: true,
+            color: "purple",
+            class: "dark:bg-transparent dark:text-purple-400 border-purple-400 dark:border-purple-400"
+        },
+        {
+            border: true,
+            color: "fuchsia",
+            class: "dark:bg-transparent dark:text-fuchsia-400 border-fuchsia-400 dark:border-fuchsia-400"
+        },
+        {
+            border: true,
+            color: "pink",
+            class: "dark:bg-transparent dark:text-pink-400 border-pink-400 dark:border-pink-400"
+        },
+        {
+            border: true,
+            color: "rose",
+            class: "dark:bg-transparent dark:text-rose-400 border-rose-400 dark:border-rose-400"
+        },
+        {
+            href: true,
+            color: "primary",
+            class: "hover:bg-primary-200"
+        },
+        {
+            href: true,
+            color: "secondary",
+            class: "hover:bg-secondary-200"
+        },
+        {
+            href: true,
+            color: "gray",
+            class: "hover:bg-gray-200"
+        },
+        {
+            href: true,
+            color: "red",
+            class: "hover:bg-red-200"
+        },
+        {
+            href: true,
+            color: "orange",
+            class: "hover:bg-orange-200"
+        },
+        {
+            href: true,
+            color: "amber",
+            class: "hover:bg-amber-200"
+        },
+        {
+            href: true,
+            color: "yellow",
+            class: "hover:bg-yellow-200"
+        },
+        {
+            href: true,
+            color: "lime",
+            class: "hover:bg-lime-200"
+        },
+        {
+            href: true,
+            color: "green",
+            class: "hover:bg-green-200"
+        },
+        {
+            href: true,
+            color: "emerald",
+            class: "hover:bg-emerald-200"
+        },
+        {
+            href: true,
+            color: "teal",
+            class: "hover:bg-teal-200"
+        },
+        {
+            href: true,
+            color: "cyan",
+            class: "hover:bg-cyan-200"
+        },
+        {
+            href: true,
+            color: "sky",
+            class: "hover:bg-sky-200"
+        },
+        {
+            href: true,
+            color: "blue",
+            class: "hover:bg-blue-200"
+        },
+        {
+            href: true,
+            color: "indigo",
+            class: "hover:bg-indigo-200"
+        },
+        {
+            href: true,
+            color: "violet",
+            class: "hover:bg-violet-200"
+        },
+        {
+            href: true,
+            color: "purple",
+            class: "hover:bg-purple-200"
+        },
+        {
+            href: true,
+            color: "fuchsia",
+            class: "hover:bg-fuchsia-200"
+        },
+        {
+            href: true,
+            color: "pink",
+            class: "hover:bg-pink-200"
+        },
+        {
+            href: true,
+            color: "rose",
+            class: "hover:bg-rose-200"
+        }
+    ],
+    defaultVariants: {
+        color: "primary",
+        size: "small",
+        rounded: false
+    }
+});

package/dist/banner/Banner.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import { fade } from "svelte/transition";
+  import { banner } from "./theme";
+  import clsx from "clsx";
+  import { type ParamsType, type BannerProps } from "..";
+  import CloseButton from "../utils/CloseButton.svelte";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { createDismissableContext } from "../utils/dismissable";
+  import { untrack } from "svelte";
+
+  let {
+    children,
+    header,
+    open = $bindable(true),
+    dismissable = true,
+    color = "gray",
+    type,
+    class: className,
+    classes,
+    innerClass,
+    transition = fade,
+    params,
+    closeClass,
+    onclose,
+    ...restProps
+  }: BannerProps = $props();
+
+  warnThemeDeprecation(
+    "Banner",
+    untrack(() => ({ innerClass, closeClass })),
+    { innerClass: "insideDiv", closeClass: "dismissable" }
+  );
+
+  const styling = $derived(classes ?? { insideDiv: innerClass, dismissable: closeClass });
+
+  // Theme context
+  const theme = $derived(getTheme("banner"));
+
+  const { base, insideDiv, dismissable: dismissableClass } = $derived(banner({ type, color }));
+
+  let ref: HTMLDivElement | undefined = $state(undefined);
+  function close(event: MouseEvent) {
+    if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
+      open = false;
+      onclose?.(event);
+    }
+  }
+  createDismissableContext(close);
+</script>
+
+{#if open}
+  <div tabindex="-1" bind:this={ref} class={base({ class: clsx(theme?.base, className) })} {...restProps} transition:transition={params as ParamsType}>
+    <div class={insideDiv({ class: clsx(theme?.insideDiv, styling.insideDiv) })}>
+      {@render children?.()}
+    </div>
+
+    {#if dismissable}
+      <div class="flex items-center justify-end">
+        <CloseButton class={dismissableClass({ class: clsx(theme?.dismissable, styling.dismissable) })} {color} ariaLabel="Remove banner" />
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L258)
+## Props
+@prop children
+@prop header
+@prop open = $bindable(true)
+@prop dismissable = true
+@prop color = "gray"
+@prop type
+@prop class: className
+@prop classes
+@prop innerClass
+@prop transition = fade
+@prop params
+@prop closeClass
+@prop onclose
+@prop ...restProps
+-->

package/dist/banner/Banner.svelte.d.ts

@@ -0,0 +1,24 @@
+import { type BannerProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L258)
+ * ## Props
+ * @prop children
+ * @prop header
+ * @prop open = $bindable(true)
+ * @prop dismissable = true
+ * @prop color = "gray"
+ * @prop type
+ * @prop class: className
+ * @prop classes
+ * @prop innerClass
+ * @prop transition = fade
+ * @prop params
+ * @prop closeClass
+ * @prop onclose
+ * @prop ...restProps
+ */
+declare const Banner: import("svelte").Component<BannerProps, {}, "open">;
+type Banner = ReturnType<typeof Banner>;
+export default Banner;

package/dist/banner/index.d.ts

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

package/dist/banner/index.js

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