flowbite-svelte 0.47.2 → 1.0.0-next.1

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 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" }
+        }
+    }
+});

package/dist/toast/type.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+import type { ParamsType, TransitionFunc } from "../types";
+import type { HTMLAttributes } from "svelte/elements";
+type ColorType = "primary" | "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "orange" | "amber" | "lime" | "emerald" | "teal" | "cyan" | "sky" | "violet" | "fuchsia" | "rose" | undefined;
+type PositionType = "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
+interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    icon?: Snippet;
+    toastStatus?: boolean;
+    dismissable?: boolean;
+    color?: ColorType;
+    position?: PositionType;
+    baseClass?: string;
+    iconClass?: string;
+    contentClass?: string;
+    align?: boolean;
+    params?: ParamsType;
+    transition?: TransitionFunc;
+}
+export { type ToastProps };

package/dist/toast/type.js

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

package/dist/toolbar/Toolbar.svelte

@@ -1,28 +1,44 @@
-<script>import Frame from "../utils/Frame.svelte";
-import { setContext } from "svelte";
-import { writable } from "svelte/store";
-import { twJoin, twMerge } from "tailwind-merge";
-export let embedded = false;
-const separators = writable(false);
-setContext("toolbar", separators);
-let color;
-$: color = embedded ? "none" : $$props.color;
-let separatorsClass;
-$: separatorsClass = twJoin($separators && "sm:divide-x rtl:divide-x-reverse");
-let divClass;
-$: divClass = twMerge("flex justify-between items-center", !embedded && "py-2 px-3", $$props.class);
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+  import { type ToolbarProps as Props, toolbar } from "./";
+
+  let { children, end, color = "default", embedded, class: className, ...restProps }: Props = $props();
+
+  const separators = writable(false);
+  setContext("toolbar", separators);
+
+  let frameColor = $derived(embedded ? "default" : color);
+
+  let { base, content } = $derived(
+    toolbar({
+      color: frameColor,
+      embedded,
+      separators: $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>
 
-<Frame {...$$restProps} class={divClass} {color} rounded={!embedded}>
-  <Frame class="flex flex-wrap items-center {separatorsClass}" {color} rounded={!embedded}>
-    <slot />
-  </Frame>
-  <slot name="end" />
-</Frame>
+<div {...restProps} class={base({ className })}>
+  <div class={content()}>
+    {@render children()}
+  </div>
+  {#if end}
+    {@render end()}
+  {/if}
+</div>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let embedded: boolean = false;
+@props: children: any;
+@props:end: any;
+@props:color: any = "default";
+@props:embedded: any;
+@props:class: string;
 -->

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

@@ -1,38 +1,13 @@
-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;
-    } & {
-        embedded?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        end: {};
-    };
-};
-export type ToolbarProps = typeof __propDef.props;
-export type ToolbarEvents = typeof __propDef.events;
-export type ToolbarSlots = typeof __propDef.slots;
+import { type ToolbarProps as Props } from "./";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let embedded: boolean = false;
+ * @props: children: any;
+ * @props:end: any;
+ * @props:color: any = "default";
+ * @props:embedded: any;
+ * @props:class: string;
  */
-export default class Toolbar extends SvelteComponentTyped<ToolbarProps, ToolbarEvents, ToolbarSlots> {
-}
-export {};
+declare const Toolbar: import("svelte").Component<Props, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/toolbar/ToolbarButton.svelte

@@ -1,59 +1,65 @@
-<script>import { getContext } from "svelte";
-import { twMerge } from "tailwind-merge";
-export let color = "default";
-export let name = void 0;
-export let ariaLabel = void 0;
-export let size = "md";
-export let href = void 0;
-const background = getContext("background");
-const colors = {
-  dark: "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600",
-  gray: "text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-300",
-  red: "text-red-500 focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-800 dark:hover:text-red-300",
-  yellow: "text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-300",
-  green: "text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-800 dark:hover:text-green-300",
-  indigo: "text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-800 dark:hover:text-indigo-300",
-  purple: "text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-800 dark:hover:text-purple-300",
-  pink: "text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-800 dark:hover:text-pink-300",
-  blue: "text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 dark:hover:text-blue-300",
-  primary: "text-primary-500 focus:ring-primary-400 hover:bg-primary-200 dark:hover:bg-primary-800 dark:hover:text-primary-300",
-  default: "focus:ring-gray-400 hover:bg-gray-100"
-};
-const sizing = {
-  xs: "m-0.5 rounded-sm focus:ring-1 p-0.5",
-  sm: "m-0.5 rounded focus:ring-1 p-0.5",
-  md: "m-0.5 rounded-lg focus:ring-2 p-1.5",
-  lg: "m-0.5 rounded-lg focus:ring-2 p-2.5"
-};
-let buttonClass;
-$: buttonClass = twMerge("focus:outline-none whitespace-normal", sizing[size], colors[color], color === "default" && (background ? "dark:hover:bg-gray-600" : "dark:hover:bg-gray-700"), $$props.class);
-const svgSizes = {
-  xs: "w-3 h-3",
-  sm: "w-3.5 h-3.5",
-  md: "w-5 h-5",
-  lg: "w-5 h-5"
-};
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { type ToolbarButtonProps as Props, toolbarButton } from "./";
+
+  const background = getContext("background");
+  let { children, color = "default", name, ariaLabel, size = "md", href, class: className, onclick, ...restProps }: Props = $props();
+
+  const buttonClass = $derived(
+    toolbarButton({
+      color,
+      size,
+      background: !!background,
+      class: className
+    })
+  );
+
+  // const colors = {
+  //   dark: 'text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600',
+  //   gray: 'text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-300',
+  //   red: 'text-red-500 focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-800 dark:hover:text-red-300',
+  //   yellow: 'text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-300',
+  //   green: 'text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-800 dark:hover:text-green-300',
+  //   indigo: 'text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-800 dark:hover:text-indigo-300',
+  //   purple: 'text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-800 dark:hover:text-purple-300',
+  //   pink: 'text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-800 dark:hover:text-pink-300',
+  //   blue: 'text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 dark:hover:text-blue-300',
+  //   primary: 'text-primary-500 focus:ring-primary-400 hover:bg-primary-200 dark:hover:bg-primary-800 dark:hover:text-primary-300',
+  //   default: 'focus:ring-gray-400 hover:bg-gray-100'
+  // };
+
+  // const sizing = {
+  //   xs: 'm-0.5 rounded-sm focus:ring-1 p-0.5',
+  //   sm: 'm-0.5 rounded focus:ring-1 p-0.5',
+  //   md: 'm-0.5 rounded-lg focus:ring-2 p-1.5',
+  //   lg: 'm-0.5 rounded-lg focus:ring-2 p-2.5'
+  // };
+
+  // let buttonClass: string = twMerge('focus:outline-none whitespace-normal', sizing[size], colors[color], color === 'default' && (background ? 'dark:hover:bg-gray-600' : 'dark:hover:bg-gray-700'), className);
 </script>
 
 {#if href}
-  <a {href} {...$$restProps} class={buttonClass} aria-label={ariaLabel ?? name}>
+  <a {href} {...restProps} class={buttonClass} aria-label={ariaLabel ?? name}>
     {#if name}<span class="sr-only">{name}</span>{/if}
-    <slot svgSize={svgSizes[size]} />
+    {@render children()}
   </a>
 {:else}
-  <button on:click type="button" {...$$restProps} class={buttonClass} aria-label={ariaLabel ?? name}>
+  <button {onclick} type="button" {...restProps} class={buttonClass} aria-label={ariaLabel ?? name}>
     {#if name}<span class="sr-only">{name}</span>{/if}
-    <slot svgSize={svgSizes[size]} />
+    {@render children()}
   </button>
 {/if}
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let color: NonNullable<$$Props['color']> = 'default';
-@prop export let name: $$Props['name'] = undefined;
-@prop export let ariaLabel: $$Props['ariaLabel'] = undefined;
-@prop export let size: SizeType = 'md';
-@prop export let href: string | undefined = undefined;
+@props: children: any;
+@props:color: any = "default";
+@props:name: any;
+@props:ariaLabel: any;
+@props:size: any = "md";
+@props:href: any;
+@props:class: string;
+@props:onclick: any;
 -->

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

@@ -1,42 +1,16 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: ({
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "dark" | "default" | "primary";
-        name?: string;
-        ariaLabel?: string;
-        size?: "xs" | "sm" | "lg" | "md";
-    } & HTMLAnchorAttributes & {
-        href: string;
-    }) | ({
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "dark" | "default" | "primary";
-        name?: string;
-        ariaLabel?: string;
-        size?: "xs" | "sm" | "lg" | "md";
-    } & HTMLButtonAttributes);
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            svgSize: string;
-        };
-    };
-};
-export type ToolbarButtonProps = typeof __propDef.props;
-export type ToolbarButtonEvents = typeof __propDef.events;
-export type ToolbarButtonSlots = typeof __propDef.slots;
+import { type ToolbarButtonProps as Props } from "./";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let color: NonNullable<$$Props['color']> = 'default';
- * @prop export let name: $$Props['name'] = undefined;
- * @prop export let ariaLabel: $$Props['ariaLabel'] = undefined;
- * @prop export let size: SizeType = 'md';
- * @prop export let href: string | undefined = undefined;
+ * @props: children: any;
+ * @props:color: any = "default";
+ * @props:name: any;
+ * @props:ariaLabel: any;
+ * @props:size: any = "md";
+ * @props:href: any;
+ * @props:class: string;
+ * @props:onclick: any;
  */
-export default class ToolbarButton extends SvelteComponentTyped<ToolbarButtonProps, ToolbarButtonEvents, ToolbarButtonSlots> {
-}
-export {};
+declare const ToolbarButton: import("svelte").Component<Props, {}, "">;
+type ToolbarButton = ReturnType<typeof ToolbarButton>;
+export default ToolbarButton;

package/dist/toolbar/ToolbarGroup.svelte

@@ -1,17 +1,27 @@
-<script>import { twMerge } from "tailwind-merge";
-import { getContext } from "svelte";
-export let divClass = "flex items-center space-x-1 rtl:space-x-reverse sm:pe-4 sm:ps-4 first:sm:ps-0 last:sm:pe-0";
-const options = getContext("toolbar");
-if (options) $options = true;
+<script lang="ts">
+  import type { Writable } from "svelte/store";
+  import { getContext } from "svelte";
+  import { type ToolbarGroupProps as Props, toolbarGroup } from "./";
+
+  let { children, spacing = "default", padding = "default", position = "middle", class: className, ...restProps }: Props = $props();
+
+  const groupClass = $derived(toolbarGroup({ spacing, padding, position, class: className }));
+
+  const options: Writable<boolean> = getContext("toolbar");
+  if (options) $options = true;
 </script>
 
-<div class={twMerge(divClass, $$props.class)}>
-  <slot />
+<div {...restProps} class={groupClass}>
+  {@render children()}
 </div>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let divClass: string = 'flex items-center space-x-1 rtl:space-x-reverse sm:pe-4 sm:ps-4 first:sm:ps-0 last:sm:pe-0';
+@props: children: any;
+@props:spacing: any = "default";
+@props:padding: any = "default";
+@props:position: any = "middle";
+@props:class: string;
 -->

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

@@ -1,24 +1,13 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        divClass?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ToolbarGroupProps = typeof __propDef.props;
-export type ToolbarGroupEvents = typeof __propDef.events;
-export type ToolbarGroupSlots = typeof __propDef.slots;
+import { type ToolbarGroupProps as Props } from "./";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: string = 'flex items-center space-x-1 rtl:space-x-reverse sm:pe-4 sm:ps-4 first:sm:ps-0 last:sm:pe-0';
+ * @props: children: any;
+ * @props:spacing: any = "default";
+ * @props:padding: any = "default";
+ * @props:position: any = "middle";
+ * @props:class: string;
  */
-export default class ToolbarGroup extends SvelteComponentTyped<ToolbarGroupProps, ToolbarGroupEvents, ToolbarGroupSlots> {
-}
-export {};
+declare const ToolbarGroup: import("svelte").Component<Props, {}, "">;
+type ToolbarGroup = ReturnType<typeof ToolbarGroup>;
+export default ToolbarGroup;

package/dist/toolbar/index.d.ts

@@ -0,0 +1,6 @@
+import type { ToolbarProps, ToolbarGroupProps, ToolbarButtonProps } from "./type";
+import Toolbar from "./Toolbar.svelte";
+import ToolbarButton from "./ToolbarButton.svelte";
+import ToolbarGroup from "./ToolbarGroup.svelte";
+import { toolbar, toolbarGroup, toolbarButton } from "./theme";
+export { Toolbar, toolbar, ToolbarButton, toolbarButton, ToolbarGroup, toolbarGroup, type ToolbarProps, type ToolbarGroupProps, type ToolbarButtonProps };

package/dist/toolbar/index.js

@@ -0,0 +1,5 @@
+import Toolbar from "./Toolbar.svelte";
+import ToolbarButton from "./ToolbarButton.svelte";
+import ToolbarGroup from "./ToolbarGroup.svelte";
+import { toolbar, toolbarGroup, toolbarButton } from "./theme";
+export { Toolbar, toolbar, ToolbarButton, toolbarButton, ToolbarGroup, toolbarGroup };