@pajohns/flowbite-svelte 0.1.0

package/dist/alert/theme.js

@@ -0,0 +1,149 @@
+import { tv } from "tailwind-variants";
+export const alert = tv({
+    base: "p-4 gap-3 text-sm",
+    variants: {
+        color: {
+            // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+            primary: "bg-primary-50 dark:bg-gray-800 text-primary-800 dark:text-primary-400",
+            secondary: "bg-secondary-50 dark:bg-secondary-800 text-secondary-800 dark:text-secondary-400",
+            gray: "bg-gray-100 text-gray-500 focus:ring-gray-400 dark:bg-gray-700 dark:text-gray-300",
+            red: "bg-red-100 text-red-500 focus:ring-red-400 dark:bg-red-200 dark:text-red-600",
+            orange: "bg-orange-100 text-orange-500 focus:ring-orange-400 dark:bg-orange-200 dark:text-orange-600",
+            amber: "bg-amber-100 text-amber-500 focus:ring-amber-400 dark:bg-amber-200 dark:text-amber-600",
+            yellow: "bg-yellow-100 text-yellow-500 focus:ring-yellow-400 dark:bg-yellow-200 dark:text-yellow-600",
+            lime: "bg-lime-100 text-lime-500 focus:ring-lime-400 dark:bg-lime-200 dark:text-lime-600",
+            green: "bg-green-100 text-green-500 focus:ring-green-400 dark:bg-green-200 dark:text-green-600",
+            emerald: "bg-emerald-100 text-emerald-500 focus:ring-emerald-400 dark:bg-emerald-200 dark:text-emerald-600",
+            teal: "bg-teal-100 text-teal-500 focus:ring-teal-400 dark:bg-teal-200 dark:text-teal-600",
+            cyan: "bg-cyan-100 text-cyan-500 focus:ring-cyan-400 dark:bg-cyan-200 dark:text-cyan-600",
+            sky: "bg-sky-100 text-sky-500 focus:ring-sky-400 dark:bg-sky-200 dark:text-sky-600",
+            blue: "bg-blue-100 text-blue-500 focus:ring-blue-400 dark:bg-blue-200 dark:text-blue-600",
+            indigo: "bg-indigo-100 text-indigo-500 focus:ring-indigo-400 dark:bg-indigo-200 dark:text-indigo-600",
+            violet: "bg-violet-100 text-violet-500 focus:ring-violet-400 dark:bg-violet-200 dark:text-violet-600",
+            purple: "bg-purple-100 text-purple-500 focus:ring-purple-400 dark:bg-purple-200 dark:text-purple-600",
+            fuchsia: "bg-fuchsia-100 text-fuchsia-500 focus:ring-fuchsia-400 dark:bg-fuchsia-200 dark:text-fuchsia-600",
+            pink: "bg-pink-100 text-pink-500 focus:ring-pink-400 dark:bg-pink-200 dark:text-pink-600",
+            rose: "bg-rose-100 text-rose-500 focus:ring-rose-400 dark:bg-rose-200 dark:text-rose-600"
+        },
+        rounded: {
+            true: "rounded-lg"
+        },
+        border: {
+            true: "border"
+        },
+        icon: {
+            true: "flex items-center"
+        },
+        dismissable: {
+            true: "flex items-center"
+        }
+    },
+    compoundVariants: [
+        // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+        {
+            border: true,
+            color: "primary",
+            class: "border-primary-500 dark:border-primary-200 divide-primary-500 dark:divide-primary-200"
+        },
+        {
+            border: true,
+            color: "secondary",
+            class: "border-secondary-500 dark:border-secondary-200 divide-secondary-500 dark:divide-secondary-200"
+        },
+        {
+            border: true,
+            color: "gray",
+            class: "border-gray-300 dark:border-gray-800 divide-gray-300 dark:divide-gray-800"
+        },
+        {
+            border: true,
+            color: "red",
+            class: "border-red-300 dark:border-red-800 divide-red-300 dark:divide-red-800"
+        },
+        {
+            border: true,
+            color: "orange",
+            class: "border-orange-300 dark:border-orange-800 divide-orange-300 dark:divide-orange-800"
+        },
+        {
+            border: true,
+            color: "amber",
+            class: "border-amber-300 dark:border-amber-800 divide-amber-300 dark:divide-amber-800"
+        },
+        {
+            border: true,
+            color: "yellow",
+            class: "border-yellow-300 dark:border-yellow-800 divide-yellow-300 dark:divide-yellow-800"
+        },
+        {
+            border: true,
+            color: "lime",
+            class: "border-lime-300 dark:border-lime-800 divide-lime-300 dark:divide-lime-800"
+        },
+        {
+            border: true,
+            color: "green",
+            class: "border-green-300 dark:border-green-800 divide-green-300 dark:divide-green-800"
+        },
+        {
+            border: true,
+            color: "emerald",
+            class: "border-emerald-300 dark:border-emerald-800 divide-emerald-300 dark:divide-emerald-800"
+        },
+        {
+            border: true,
+            color: "teal",
+            class: "border-teal-300 dark:border-teal-800 divide-teal-300 dark:divide-teal-800"
+        },
+        {
+            border: true,
+            color: "cyan",
+            class: "border-cyan-300 dark:border-cyan-800 divide-cyan-300 dark:divide-cyan-800"
+        },
+        {
+            border: true,
+            color: "sky",
+            class: "border-sky-300 dark:border-sky-800 divide-sky-300 dark:divide-sky-800"
+        },
+        {
+            border: true,
+            color: "blue",
+            class: "border-blue-300 dark:border-blue-800 divide-blue-300 dark:divide-blue-800"
+        },
+        {
+            border: true,
+            color: "indigo",
+            class: "border-indigo-300 dark:border-indigo-800 divide-indigo-300 dark:divide-indigo-800"
+        },
+        //  violet, purple, fuchsia, pink, rose
+        {
+            border: true,
+            color: "violet",
+            class: "border-violet-300 dark:border-violet-800 divide-violet-300 dark:divide-violet-800"
+        },
+        {
+            border: true,
+            color: "purple",
+            class: "border-purple-300 dark:border-purple-800 divide-purple-300 dark:divide-purple-800"
+        },
+        {
+            border: true,
+            color: "fuchsia",
+            class: "border-fuchsia-300 dark:border-fuchsia-800 divide-fuchsia-300 dark:divide-fuchsia-800"
+        },
+        {
+            border: true,
+            color: "pink",
+            class: "border-pink-300 dark:border-pink-800 divide-pink-300 dark:divide-pink-800"
+        },
+        {
+            border: true,
+            color: "rose",
+            class: "border-rose-300 dark:border-rose-800 divide-rose-300 dark:divide-rose-800"
+        }
+    ],
+    defaultVariants: {
+        color: "primary",
+        rounded: true
+    }
+});

package/dist/avatar/Avatar.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { avatar } from "./theme";
+  import clsx from "clsx";
+  import { type AvatarProps } from "..";
+  import Indicator from "../indicator/Indicator.svelte";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { children, indicator, src, href, target, cornerStyle = "circular", border = false, stacked = false, dot, class: className, alt, size = "md", onclick, ...restProps }: AvatarProps = $props();
+
+  // Theme context
+  const theme = $derived(getTheme("avatar"));
+
+  let dotProps = $derived(dot ? { placement: "top-right" as const, color: "gray" as const, size: "lg" as const, ...dot } : undefined);
+
+  let avatarClass = $derived(
+    avatar({
+      cornerStyle,
+      border,
+      stacked,
+      size,
+      class: clsx(theme, className)
+    })
+  );
+</script>
+
+{#if !src || !!href || children || dot || indicator}
+  <svelte:element this={href ? "a" : "div"} role={href ? undefined : "button"} {onclick} {href} {target} {...restProps} class={avatarClass}>
+    {#if src}
+      <img {alt} {src} class={cornerStyle === "circular" ? "rounded-full" : "rounded-sm"} />
+    {:else if children}
+      {@render children()}
+    {:else}
+      <svg class="h-full w-full {cornerStyle === 'circular' ? 'rounded-full' : 'rounded-sm'}" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
+      </svg>
+    {/if}
+    {#if dotProps}
+      <Indicator border offset={cornerStyle === "circular" ? true : false} {...dotProps} />
+    {/if}
+    {#if indicator}
+      {@render indicator()}
+    {/if}
+  </svelte:element>
+{:else}
+  <img {alt} {src} {...restProps} {onclick} class={avatarClass} />
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[AvatarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L232)
+## Props
+@prop children
+@prop indicator
+@prop src
+@prop href
+@prop target
+@prop cornerStyle = "circular"
+@prop border = false
+@prop stacked = false
+@prop dot
+@prop class: className
+@prop alt
+@prop size = "md"
+@prop onclick
+@prop ...restProps
+-->

package/dist/avatar/Avatar.svelte.d.ts

@@ -0,0 +1,24 @@
+import { type AvatarProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [AvatarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L232)
+ * ## Props
+ * @prop children
+ * @prop indicator
+ * @prop src
+ * @prop href
+ * @prop target
+ * @prop cornerStyle = "circular"
+ * @prop border = false
+ * @prop stacked = false
+ * @prop dot
+ * @prop class: className
+ * @prop alt
+ * @prop size = "md"
+ * @prop onclick
+ * @prop ...restProps
+ */
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/avatar/index.d.ts

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

package/dist/avatar/index.js

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

package/dist/avatar/theme.d.ts

@@ -0,0 +1,63 @@
+import { type VariantProps } from "tailwind-variants";
+export type AvatarVariants = VariantProps<typeof avatar>;
+export declare const avatar: import("tailwind-variants").TVReturnType<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, "relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300", {
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, "relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300", unknown, unknown, undefined>>;

package/dist/avatar/theme.js

@@ -0,0 +1,31 @@
+import { tv } from "tailwind-variants";
+export const avatar = tv({
+    base: "relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300",
+    variants: {
+        cornerStyle: {
+            rounded: "rounded-sm",
+            circular: "rounded-full"
+        },
+        border: {
+            true: "p-1 ring-2 ring-gray-300 dark:ring-gray-500",
+            false: ""
+        },
+        stacked: {
+            true: "border-2 not-first:-ms-4 border-white dark:border-gray-800",
+            false: ""
+        },
+        size: {
+            xs: "w-6 h-6",
+            sm: "w-8 h-8",
+            md: "w-10 h-10",
+            lg: "w-20 h-20",
+            xl: "w-36 h-36"
+        }
+    },
+    defaultVariants: {
+        cornerStyle: "circular",
+        border: false,
+        stacked: false,
+        size: "md"
+    }
+});

package/dist/badge/Badge.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { type BadgeProps, type ParamsType } from "..";
+  import CloseButton from "../utils/CloseButton.svelte";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import clsx from "clsx";
+  import { fade } from "svelte/transition";
+  import { badge } from "./theme";
+  import { createDismissableContext } from "../utils/dismissable";
+  import { untrack } from "svelte";
+
+  let {
+    children,
+    icon,
+    badgeStatus = $bindable(true),
+    color = "primary",
+    large = false,
+    dismissable = false,
+    class: className,
+    classes,
+    border,
+    href,
+    target,
+    rounded,
+    transition = fade,
+    params,
+    aClass,
+    ...restProps
+  }: BadgeProps = $props();
+
+  warnThemeDeprecation(
+    "Badge",
+    untrack(() => ({ aClass })),
+    { aClass: "linkClass" }
+  );
+
+  const styling = $derived(classes ?? { linkClass: aClass });
+
+  // Theme context
+  const theme = $derived(getTheme("badge"));
+
+  const { base, linkClass } = $derived(badge({ color, size: large ? "large" : "small", rounded, border }));
+
+  let ref: HTMLDivElement | undefined = $state(undefined);
+
+  const close = () => {
+    if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
+      badgeStatus = false;
+    }
+  };
+
+  createDismissableContext(close);
+</script>
+
+{#if badgeStatus}
+  <div {...restProps} bind:this={ref} transition:transition={params as ParamsType} class={base({ class: clsx(theme?.base, className) })}>
+    {#if href}
+      <a {href} {target} class={linkClass({ class: clsx(theme?.linkClass, styling.linkClass) })}>
+        {@render children()}
+      </a>
+    {:else}
+      {@render children()}
+    {/if}
+
+    {#if dismissable}
+      {#if icon}
+        <CloseButton class="ms-1.5 -me-1.5" {color} size={large ? "sm" : "xs"} ariaLabel="Remove badge">
+          {@render icon()}
+        </CloseButton>
+      {:else}
+        <CloseButton class="ms-1.5 -me-1.5" {color} size={large ? "sm" : "xs"} ariaLabel="Remove badge" />
+      {/if}
+    {/if}
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L244)
+## Props
+@prop children
+@prop icon
+@prop badgeStatus = $bindable(true)
+@prop color = "primary"
+@prop large = false
+@prop dismissable = false
+@prop class: className
+@prop classes
+@prop border
+@prop href
+@prop target
+@prop rounded
+@prop transition = fade
+@prop params
+@prop aClass
+@prop ...restProps
+-->

package/dist/badge/Badge.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type BadgeProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L244)
+ * ## Props
+ * @prop children
+ * @prop icon
+ * @prop badgeStatus = $bindable(true)
+ * @prop color = "primary"
+ * @prop large = false
+ * @prop dismissable = false
+ * @prop class: className
+ * @prop classes
+ * @prop border
+ * @prop href
+ * @prop target
+ * @prop rounded
+ * @prop transition = fade
+ * @prop params
+ * @prop aClass
+ * @prop ...restProps
+ */
+declare const Badge: import("svelte").Component<BadgeProps, {}, "badgeStatus">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/badge/index.d.ts

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

package/dist/badge/index.js

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