flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/alert/Alert.svelte.d.ts

@@ -1,53 +1,20 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
-        tag?: string;
-        color?: import("../utils/Frame.svelte").FrameColor;
-        rounded?: boolean;
-        border?: boolean;
-        shadow?: boolean;
-        node?: HTMLElement | undefined;
-        use?: import("svelte/action").Action<HTMLElement, any>;
-        options?: object;
-        class?: string;
-        role?: string;
-        open?: boolean;
-        transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
-        params?: any;
-    } & import("..").Dismissable & {
-        dismissable?: boolean;
-        defaultClass?: string;
-    };
-    events: {
-        close: CustomEvent<any>;
-        click: MouseEvent;
-        change: CustomEvent<any>;
-        keydown: CustomEvent<any>;
-        keyup: CustomEvent<any>;
-        focus: CustomEvent<any>;
-        blur: CustomEvent<any>;
-        mouseenter: CustomEvent<any>;
-        mouseleave: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        icon: {};
-        default: {};
-        'close-button': {
-            close: (ev: MouseEvent | undefined) => void;
-        };
-    };
-};
-export type AlertProps = typeof __propDef.props;
-export type AlertEvents = typeof __propDef.events;
-export type AlertSlots = typeof __propDef.slots;
+import { type AlertProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let dismissable: $$Props['dismissable'] = false;
- * @prop export let defaultClass: $$Props['defaultClass'] = 'p-4 gap-3 text-sm';
+ * @props: children: any;
+ * @props:icon: any;
+ * @props:alertStatus: any = $bindable(true);
+ * @props:closeIcon: any;
+ * @props:color: any = "primary";
+ * @props:rounded: any = true;
+ * @props:border: any;
+ * @props:class: string;
+ * @props:dismissable: any;
+ * @props:transition: any = fade;
+ * @props:params: any;
+ * @props:onclick: any;
  */
-export default class Alert extends SvelteComponentTyped<AlertProps, AlertEvents, AlertSlots> {
-}
-export {};
+declare const Alert: import("svelte").Component<Props, {}, "alertStatus">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/alert/index.d.ts

@@ -0,0 +1,4 @@
+import Alert from "./Alert.svelte";
+import type { alertColor, AlertProps } from "./type";
+import { alert } from "./theme";
+export { type alertColor, type AlertProps, Alert, alert };

package/dist/alert/index.js

@@ -0,0 +1,3 @@
+import Alert from "./Alert.svelte";
+import { alert } from "./theme";
+export { Alert, alert };

package/dist/alert/theme.d.ts

@@ -0,0 +1,247 @@
+declare const alert: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    rounded: {
+        true: string;
+    };
+    border: {
+        true: string;
+    };
+    icon: {
+        true: string;
+    };
+    dismissable: {
+        true: string;
+    };
+}, undefined, "p-4 gap-3 text-sm", import("tailwind-variants/dist/config").TVConfig<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    rounded: {
+        true: string;
+    };
+    border: {
+        true: string;
+    };
+    icon: {
+        true: string;
+    };
+    dismissable: {
+        true: string;
+    };
+}, {
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    rounded: {
+        true: string;
+    };
+    border: {
+        true: string;
+    };
+    icon: {
+        true: string;
+    };
+    dismissable: {
+        true: string;
+    };
+}>, {
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    rounded: {
+        true: string;
+    };
+    border: {
+        true: string;
+    };
+    icon: {
+        true: string;
+    };
+    dismissable: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    rounded: {
+        true: string;
+    };
+    border: {
+        true: string;
+    };
+    icon: {
+        true: string;
+    };
+    dismissable: {
+        true: string;
+    };
+}, undefined, "p-4 gap-3 text-sm", import("tailwind-variants/dist/config").TVConfig<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    rounded: {
+        true: string;
+    };
+    border: {
+        true: string;
+    };
+    icon: {
+        true: string;
+    };
+    dismissable: {
+        true: string;
+    };
+}, {
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    rounded: {
+        true: string;
+    };
+    border: {
+        true: string;
+    };
+    icon: {
+        true: string;
+    };
+    dismissable: {
+        true: string;
+    };
+}>, unknown, unknown, undefined>>;
+export { alert };

package/dist/alert/theme.js

@@ -0,0 +1,150 @@
+import { tv } from "tailwind-variants";
+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 hover:bg-gray-200 focus:ring-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white",
+            red: "bg-red-100 text-red-500 hover:bg-red-200 focus:ring-red-400 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300",
+            orange: "bg-orange-100 text-orange-500 hover:bg-orange-200 focus:ring-orange-400 dark:bg-orange-200 dark:text-orange-600 dark:hover:bg-orange-300",
+            amber: "bg-amber-100 text-amber-500 hover:bg-amber-200 focus:ring-amber-400 dark:bg-amber-200 dark:text-amber-600 dark:hover:bg-amber-300",
+            yellow: "bg-yellow-100 text-yellow-500 hover:bg-yellow-200 focus:ring-yellow-400 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300",
+            lime: "bg-lime-100 text-lime-500 hover:bg-lime-200 focus:ring-lime-400 dark:bg-lime-200 dark:text-lime-600 dark:hover:bg-lime-300",
+            green: "bg-green-100 text-green-500 hover:bg-green-200 focus:ring-green-400 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300",
+            emerald: "bg-emerald-100 text-emerald-500 hover:bg-emerald-200 focus:ring-emerald-400 dark:bg-emerald-200 dark:text-emerald-600 dark:hover:bg-emerald-300",
+            teal: "bg-teal-100 text-teal-500 hover:bg-teal-200 focus:ring-teal-400 dark:bg-teal-200 dark:text-teal-600 dark:hover:bg-teal-300",
+            cyan: "bg-cyan-100 text-cyan-500 hover:bg-cyan-200 focus:ring-cyan-400 dark:bg-cyan-200 dark:text-cyan-600 dark:hover:bg-cyan-300",
+            sky: "bg-sky-100 text-sky-500 hover:bg-sky-200 focus:ring-sky-400 dark:bg-sky-200 dark:text-sky-600 dark:hover:bg-sky-300",
+            blue: "bg-blue-100 text-blue-500 hover:bg-blue-200 focus:ring-blue-400 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300",
+            indigo: "bg-indigo-100 text-indigo-500 hover:bg-indigo-200 focus:ring-indigo-400 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300",
+            violet: "bg-violet-100 text-violet-500 hover:bg-violet-200 focus:ring-violet-400 dark:bg-violet-200 dark:text-violet-600 dark:hover:bg-violet-300",
+            purple: "bg-purple-100 text-purple-500 hover:bg-purple-200 focus:ring-purple-400 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300",
+            fuchsia: "bg-fuchsia-100 text-fuchsia-500 hover:bg-fuchsia-200 focus:ring-fuchsia-400 dark:bg-fuchsia-200 dark:text-fuchsia-600 dark:hover:bg-fuchsia-300",
+            pink: "bg-pink-100 text-pink-500 hover:bg-pink-200 focus:ring-pink-400 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300",
+            rose: "bg-rose-100 text-rose-500 hover:bg-rose-200 focus:ring-rose-400 dark:bg-rose-200 dark:text-rose-600 dark:hover:bg-rose-300"
+        },
+        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
+    }
+});
+export { alert };

package/dist/alert/type.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+import type { ParamsType, TransitionFunc } from "../types";
+import type { HTMLAttributes } from "svelte/elements";
+type alertColor = "primary" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    icon?: Snippet;
+    alertStatus?: boolean;
+    closeIcon?: boolean;
+    color?: alertColor;
+    border?: boolean;
+    rounded?: boolean;
+    dismissable?: boolean;
+    transition?: TransitionFunc;
+    params?: ParamsType;
+    onclick?: () => void;
+}
+export type { alertColor, AlertProps };

package/dist/alert/type.js

@@ -0,0 +1 @@
+export {};

package/dist/avatar/Avatar.svelte

@@ -1,56 +1,61 @@
-<script>import Indicator from "../indicators/Indicator.svelte";
-import { twMerge } from "tailwind-merge";
-export let src = "";
-export let href = void 0;
-export let rounded = false;
-export let border = false;
-export let stacked = false;
-export let dot = void 0;
-export let alt = "";
-export let size = "md";
-$: dot = dot && { placement: "top-right", color: "gray", size: "lg", ...dot };
-const sizes = {
-  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",
-  none: ""
-};
-let avatarClass;
-$: avatarClass = twMerge(rounded ? "rounded" : "rounded-full", border && "p-1 ring-2 ring-gray-300 dark:ring-gray-500", sizes[size], stacked && "border-2 -ms-4 border-white dark:border-gray-800", "bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300 object-cover", $$props.class);
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { Indicator } from "..";
+  import { type AvatarProps as Props, avatar } from ".";
+
+  let { children, src, href, target, cornerStyle = "circular", border = false, stacked = false, dot, class: className, alt, size = "md", onclick, ...restProps }: Props = $props();
+
+  // Get merged theme from context
+  const context = getContext<Record<string, object>>("themeConfig");
+  // Use context theme if available, otherwise fallback to default
+  const avatarTheme = context?.avatar || avatar;
+
+  dot = dot && { placement: "top-right", color: "gray", size: "lg", ...dot };
+
+  let avatarClass = $derived(
+    avatarTheme({
+      cornerStyle,
+      border,
+      stacked,
+      size,
+      className
+    })
+  );
 </script>
 
-{#if !src || !!href || $$slots.default || dot}
-  <svelte:element this={href ? 'a' : 'div'} {href} {...$$restProps} class="relative flex justify-center items-center {avatarClass}">
+{#if !src || !!href || children || dot}
+  <svelte:element this={href ? "a" : "div"} role={href ? undefined : "button"} {onclick} {href} {target} {...restProps} class={avatarClass}>
     {#if src}
-      <img {alt} {src} class={rounded ? 'rounded' : 'rounded-full'} />
+      <img {alt} {src} class={cornerStyle === "circular" ? "rounded-full" : "rounded"} />
+    {:else if children}
+      {@render children()}
     {:else}
-      <slot>
-        <!-- default avatar placeholder -->
-        <svg class="w-full h-full {rounded ? 'rounded' : 'rounded-full'}" 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" />
-        </svg>
-      </slot>
+      <svg class="h-full w-full {cornerStyle === 'circular' ? 'rounded-full' : 'rounded'}" 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 dot}
-      <Indicator border offset={rounded} {...dot} />
+      <Indicator border offset={cornerStyle === "circular" ? true : false} {...dot} />
     {/if}
   </svelte:element>
 {:else}
-  <img {alt} {src} {...$$restProps} class={avatarClass} />
+  <img {alt} {src} {...restProps} class={avatarClass} />
 {/if}
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let src: $$Props['src'] = '';
-@prop export let href: $$Props['href'] = undefined;
-@prop export let rounded: $$Props['rounded'] = false;
-@prop export let border: $$Props['border'] = false;
-@prop export let stacked: $$Props['stacked'] = false;
-@prop export let dot: $$Props['dot'] = undefined;
-@prop export let alt: $$Props['alt'] = '';
-@prop export let size: NonNullable<$$Props['size']> = 'md';
+@props: children: any;
+@props:src: any;
+@props:href: any;
+@props:target: any;
+@props:cornerStyle: any = "circular";
+@props:border: any = false;
+@props:stacked: any = false;
+@props:dot: any;
+@props:class: string;
+@props:alt: any;
+@props:size: any = "md";
+@props:onclick: any;
 -->

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

@@ -1,38 +1,20 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes, HTMLAnchorAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: {
-        href?: string;
-        src?: string;
-        rounded?: boolean;
-        border?: boolean;
-        stacked?: boolean;
-        dot?: object | undefined;
-        alt?: string;
-        size?: "xs" | "sm" | "md" | "lg" | "xl" | "none";
-    } & (HTMLAnchorAttributes | HTMLAttributes<HTMLDivElement>);
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-type AvatarProps_ = typeof __propDef.props;
-export { AvatarProps_ as AvatarProps };
-export type AvatarEvents = typeof __propDef.events;
-export type AvatarSlots = typeof __propDef.slots;
+import { type AvatarProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let src: $$Props['src'] = '';
- * @prop export let href: $$Props['href'] = undefined;
- * @prop export let rounded: $$Props['rounded'] = false;
- * @prop export let border: $$Props['border'] = false;
- * @prop export let stacked: $$Props['stacked'] = false;
- * @prop export let dot: $$Props['dot'] = undefined;
- * @prop export let alt: $$Props['alt'] = '';
- * @prop export let size: NonNullable<$$Props['size']> = 'md';
+ * @props: children: any;
+ * @props:src: any;
+ * @props:href: any;
+ * @props:target: any;
+ * @props:cornerStyle: any = "circular";
+ * @props:border: any = false;
+ * @props:stacked: any = false;
+ * @props:dot: any;
+ * @props:class: string;
+ * @props:alt: any;
+ * @props:size: any = "md";
+ * @props:onclick: any;
  */
-export default class Avatar extends SvelteComponentTyped<AvatarProps_, AvatarEvents, AvatarSlots> {
-}
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/avatar/index.d.ts

@@ -0,0 +1,4 @@
+import type { AvatarProps } from "./type";
+import Avatar from "./Avatar.svelte";
+import { avatar } from "./theme";
+export { Avatar, avatar, type AvatarProps };

package/dist/avatar/index.js

@@ -0,0 +1,3 @@
+import Avatar from "./Avatar.svelte";
+import { avatar } from "./theme";
+export { Avatar, avatar };