flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/toast/type.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from "svelte";
+import type { ParamsType, TransitionFunc } from "../types";
+import type { HTMLAttributes } from "svelte/elements";
+import type { ToastVaraints } from "./theme";
+interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    icon?: Snippet;
+    toastStatus?: boolean;
+    dismissable?: boolean;
+    color?: ToastVaraints["color"];
+    position?: ToastVaraints["position"];
+    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,45 @@
-<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 "./";
+  import clsx from "clsx";
+
+  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({ class: clsx(className) })}>
+  <div class={content()}>
+    {@render children()}
+  </div>
+  {#if end}
+    {@render end()}
+  {/if}
+</div>
 
 <!--
 @component
 [Go to docs](https://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,23 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: import("svelte/elements").HTMLAttributes<HTMLElement> & {
-        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;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-        end: {};
-    };
+    slots: {};
 };
-export type ToolbarProps = typeof __propDef.props;
+type ToolbarProps_ = typeof __propDef.props;
+export { ToolbarProps_ as ToolbarProps };
 export type ToolbarEvents = typeof __propDef.events;
 export type ToolbarSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://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 default class Toolbar extends SvelteComponentTyped<ToolbarProps_, ToolbarEvents, ToolbarSlots> {
 }
-export {};

package/dist/toolbar/ToolbarButton.svelte

@@ -1,49 +1,32 @@
-<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-xs focus:ring-1 p-0.5",
-  sm: "m-0.5 rounded-sm 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-hidden 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 "./";
+  import clsx from "clsx";
+
+  const background = getContext("background");
+  let { children, color = "default", name, "aria-label": ariaLabel, size = "md", href, class: className, ...restProps }: Props = $props();
+
+  const buttonClass = $derived(
+    toolbarButton({
+      color,
+      size,
+      background: !!background,
+      class: clsx(className)
+    })
+  );
+
+  // let buttonClass: string = twMerge('focus:outline-hidden 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 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}
 
@@ -51,9 +34,11 @@ const svgSizes = {
 @component
 [Go to docs](https://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:"aria-label": any;
+@props:size: any = "md";
+@props:href: any;
+@props:class: string;
 -->

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

@@ -1,42 +1,25 @@
 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);
+    props: Record<string, never>;
     events: {
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {
-            svgSize: string;
-        };
-    };
+    slots: {};
 };
-export type ToolbarButtonProps = typeof __propDef.props;
+type ToolbarButtonProps_ = typeof __propDef.props;
+export { ToolbarButtonProps_ as ToolbarButtonProps };
 export type ToolbarButtonEvents = typeof __propDef.events;
 export type ToolbarButtonSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://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:"aria-label": any;
+ * @props:size: any = "md";
+ * @props:href: any;
+ * @props:class: string;
  */
-export default class ToolbarButton extends SvelteComponentTyped<ToolbarButtonProps, ToolbarButtonEvents, ToolbarButtonSlots> {
+export default class ToolbarButton extends SvelteComponentTyped<ToolbarButtonProps_, ToolbarButtonEvents, ToolbarButtonSlots> {
 }
-export {};

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 sm:first:ps-0 sm:last: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/)
 ## Props
-@prop export let divClass: string = 'flex items-center space-x-1 rtl:space-x-reverse sm:pe-4 sm:ps-4 sm:first:ps-0 sm:last: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,23 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        divClass?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type ToolbarGroupProps = typeof __propDef.props;
+type ToolbarGroupProps_ = typeof __propDef.props;
+export { ToolbarGroupProps_ as ToolbarGroupProps };
 export type ToolbarGroupEvents = typeof __propDef.events;
 export type ToolbarGroupSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://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 sm:first:ps-0 sm:last: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 default class ToolbarGroup extends SvelteComponentTyped<ToolbarGroupProps_, ToolbarGroupEvents, ToolbarGroupSlots> {
 }
-export {};

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 };