flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/timeline/type.d.ts

@@ -0,0 +1,65 @@
+import type { HTMLOlAttributes, HTMLLiAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+import type { TimelineVariants } from "./theme";
+interface ActivityType {
+    title: HTMLElement | string;
+    date: Date | string;
+    src: string;
+    alt: string;
+    text?: HTMLElement | string;
+}
+interface GroupTimelineType {
+    name: string | HTMLElement;
+    src: string;
+    alt: string;
+    href?: string;
+    isPrivate?: boolean;
+    comment?: string | HTMLElement;
+}
+interface ActivityProps extends HTMLOlAttributes {
+    children: Snippet;
+}
+interface ActivityItemProps extends HTMLLiAttributes {
+    activities: ActivityType[];
+    liClass?: string;
+    spanClass?: string;
+    imgClass?: string;
+    outerDivClass?: string;
+    innerDivClass?: string;
+    timeClass?: string;
+    titleClass?: string;
+    textClass?: string;
+}
+interface GroupProps extends HTMLOlAttributes {
+    children: Snippet;
+    divClass?: string;
+    timeClass?: string;
+    date?: Date | string;
+    olClass?: string;
+}
+interface GroupItemProps extends HTMLLiAttributes {
+    timelines: GroupTimelineType[];
+    aClass?: string;
+    imgClass?: string;
+    divClass?: string;
+    titleClass?: string;
+    spanClass?: string;
+}
+type DateFormat = "year" | "month-year" | "full-date";
+interface TimelineProps extends HTMLOlAttributes {
+    children: Snippet;
+    order?: TimelineVariants["order"];
+}
+interface TimelineItemProps extends HTMLLiAttributes {
+    children: Snippet;
+    orientationSlot?: Snippet;
+    title: string;
+    date: string;
+    svgClass?: string;
+    liClass?: string;
+    divClass?: string;
+    timeClass?: string;
+    h3Class?: string;
+    dateFormat?: DateFormat;
+}
+export type { ActivityType, ActivityProps, ActivityItemProps, GroupTimelineType, GroupProps, GroupItemProps, TimelineProps, TimelineItemProps, DateFormat };

package/dist/timeline/type.js

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

package/dist/toast/Toast.svelte

@@ -1,78 +1,33 @@
-<script>import { createEventDispatcher } from "svelte";
-import { fade } from "svelte/transition";
-import { twMerge } from "tailwind-merge";
-import { CloseButton } from "..";
-export let dismissable = true;
-export let color = "primary";
-export let position = "none";
-export let divClass = "w-full max-w-xs p-4 text-gray-500 bg-white shadow-sm dark:text-gray-400 dark:bg-gray-800 gap-3";
-export let defaultIconClass = "w-8 h-8";
-export let contentClass = "w-full text-sm font-normal";
-export let align = true;
-export let transition = fade;
-export let params = {};
-export let toastStatus = true;
-const dispatch = createEventDispatcher();
-const positions = {
-  "top-left": "absolute top-5 start-5",
-  "top-right": "absolute top-5 end-5",
-  "bottom-left": "absolute bottom-5 start-5",
-  "bottom-right": "absolute bottom-5 end-5",
-  none: ""
-};
-let finalDivClass = twMerge(
-  "flex",
-  align ? "items-center" : "items-start",
-  divClass,
-  positions[position],
-  $$props.class
-);
-const colors = {
-  primary: "text-primary-500 bg-primary-100 dark:bg-primary-800 dark:text-primary-200",
-  dark: "text-gray-500 bg-gray-100 dark:bg-gray-700 dark:text-gray-200",
-  red: "text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200",
-  yellow: "text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200",
-  green: "text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200",
-  blue: "text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200",
-  indigo: "text-indigo-500 bg-indigo-100 dark:bg-indigo-800 dark:text-indigo-200",
-  purple: "text-purple-500 bg-purple-100 dark:bg-purple-800 dark:text-purple-200",
-  pink: "text-pink-500 bg-pink-100 dark:bg-pink-700 dark:text-pink-200",
-  none: ""
-};
-let iconClass;
-$: iconClass = twMerge(
-  "inline-flex items-center justify-center shrink-0 rounded-lg",
-  colors[color],
-  defaultIconClass
-);
-const clsBtnExtraClass = "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";
+<script lang="ts">
+  import { CloseButton } from "..";
+  import type { ParamsType } from "../types";
+  import { toast, type ToastProps as Props } from ".";
+  import { fly } from "svelte/transition";
+
+  let { children, icon, toastStatus = $bindable(true), dismissable = true, color = "primary", position, baseClass, iconClass, contentClass, align = true, params, transition = fly, ...restProps }: Props = $props();
+
+  const { base, icon: iconVariants, content, close } = $derived(toast({ color, position, align }));
 </script>
 
 {#if toastStatus}
-  <div
-    role="alert"
-    {...$$restProps}
-    class={finalDivClass}
-    transition:transition={params}
-  >
-    {#if $$slots.icon}
-      <div class={iconClass}>
-        <slot name="icon" />
+  <div role="alert" transition:transition={params as ParamsType} {...restProps} class={base({ class: baseClass })}>
+    {#if icon}
+      <div class={iconVariants({ class: iconClass })}>
+        {@render icon()}
       </div>
     {/if}
 
-    <div class={contentClass}>
-        <slot />
+    <div class={content({ class: contentClass })}>
+      {@render children()}
     </div>
 
     {#if dismissable}
       <CloseButton
-        divclass={clsBtnExtraClass}
+        class={close()}
         ariaLabel="Remove toast"
         {color}
-        on:click={() => {
+        onclick={() => {
           toastStatus = false;
-          dispatch('close');
         }}
       />
     {/if}
@@ -83,14 +38,16 @@ const clsBtnExtraClass = "ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:t
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let dismissable: $$Props['dismissable'] = true;
-@prop export let color: NonNullable<$$Props['color']> = 'primary';
-@prop export let position: NonNullable<$$Props['position']> = 'none';
-@prop export let divClass: $$Props['divClass'] = 'w-full max-w-xs p-4 text-gray-500 bg-white shadow-sm dark:text-gray-400 dark:bg-gray-800 gap-3';
-@prop export let defaultIconClass: $$Props['defaultIconClass'] = 'w-8 h-8';
-@prop export let contentClass: $$Props['contentClass'] = 'w-full text-sm font-normal';
-@prop export let align: $$Props['align'] = true;
-@prop export let transition: NonNullable<$$Props['transition']> = fade;
-@prop export let params: $$Props['params'] = {};
-@prop export let toastStatus: $$Props['toastStatus'] = true;
+@props: children: any;
+@props:icon: any;
+@props:toastStatus: any = $bindable(true);
+@props:dismissable: any = true;
+@props:color: any = "primary";
+@props:position: any;
+@props:baseClass: any;
+@props:iconClass: any;
+@props:contentClass: any;
+@props:align: any = true;
+@props:params: any;
+@props:transition: any = fly;
 -->

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

@@ -1,47 +1,30 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
-import { type TransitionConfig } from 'svelte/transition';
-import type { ColorVariant, ToastPositionType } from '../types';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLDivElement> & {
-        dismissable?: boolean;
-        color?: ColorVariant;
-        position?: ToastPositionType;
-        divClass?: string;
-        defaultIconClass?: string;
-        contentClass?: string;
-        align?: boolean;
-        transition?: (node: HTMLElement, params: any) => TransitionConfig;
-        params?: any;
-        toastStatus?: boolean;
-    };
+    props: Record<string, never>;
     events: {
-        close: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        icon: {};
-        default: {};
-    };
+    slots: {};
 };
-export type ToastProps = typeof __propDef.props;
+type ToastProps_ = typeof __propDef.props;
+export { ToastProps_ as ToastProps };
 export type ToastEvents = typeof __propDef.events;
 export type ToastSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let dismissable: $$Props['dismissable'] = true;
- * @prop export let color: NonNullable<$$Props['color']> = 'primary';
- * @prop export let position: NonNullable<$$Props['position']> = 'none';
- * @prop export let divClass: $$Props['divClass'] = 'w-full max-w-xs p-4 text-gray-500 bg-white shadow-sm dark:text-gray-400 dark:bg-gray-800 gap-3';
- * @prop export let defaultIconClass: $$Props['defaultIconClass'] = 'w-8 h-8';
- * @prop export let contentClass: $$Props['contentClass'] = 'w-full text-sm font-normal';
- * @prop export let align: $$Props['align'] = true;
- * @prop export let transition: NonNullable<$$Props['transition']> = fade;
- * @prop export let params: $$Props['params'] = {};
- * @prop export let toastStatus: $$Props['toastStatus'] = true;
+ * @props: children: any;
+ * @props:icon: any;
+ * @props:toastStatus: any = $bindable(true);
+ * @props:dismissable: any = true;
+ * @props:color: any = "primary";
+ * @props:position: any;
+ * @props:baseClass: any;
+ * @props:iconClass: any;
+ * @props:contentClass: any;
+ * @props:align: any = true;
+ * @props:params: any;
+ * @props:transition: any = fly;
  */
-export default class Toast extends SvelteComponentTyped<ToastProps, ToastEvents, ToastSlots> {
+export default class Toast extends SvelteComponentTyped<ToastProps_, ToastEvents, ToastSlots> {
 }
-export {};

package/dist/toast/index.d.ts

@@ -0,0 +1,4 @@
+import type { ToastProps } from "./type";
+import Toast from "./Toast.svelte";
+import { toast } from "./theme";
+export { Toast, toast, type ToastProps };

package/dist/toast/index.js

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

package/dist/toast/theme.d.ts

@@ -0,0 +1,321 @@
+import { type VariantProps } from "tailwind-variants";
+export type ToastVaraints = VariantProps<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>>;

package/dist/toast/theme.js

@@ -0,0 +1,100 @@
+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" }
+        }
+    }
+});