flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/toolbar/theme.d.ts

@@ -0,0 +1,319 @@
+import { type VariantProps } from "tailwind-variants";
+export type ToolbarVariants = VariantProps<typeof toolbar>;
+export declare const toolbar: import("tailwind-variants").TVReturnType<{
+    embedded: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+    color: {
+        default: {
+            base: string;
+            content: string;
+        };
+        primary: {
+            base: string;
+            content: string;
+        };
+        secondary: {
+            base: string;
+            content: string;
+        };
+        gray: {
+            base: string;
+            content: string;
+        };
+        red: {
+            base: string;
+            content: string;
+        };
+        yellow: {
+            base: string;
+            content: string;
+        };
+        green: {
+            base: string;
+            content: string;
+        };
+        indigo: {
+            base: string;
+            content: string;
+        };
+        purple: {
+            base: string;
+            content: string;
+        };
+        pink: {
+            base: string;
+            content: string;
+        };
+        blue: {
+            base: string;
+            content: string;
+        };
+        dark: {
+            base: string;
+            content: string;
+        };
+    };
+    separators: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+}, undefined, {
+    embedded: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+    color: {
+        default: {
+            base: string;
+            content: string;
+        };
+        primary: {
+            base: string;
+            content: string;
+        };
+        secondary: {
+            base: string;
+            content: string;
+        };
+        gray: {
+            base: string;
+            content: string;
+        };
+        red: {
+            base: string;
+            content: string;
+        };
+        yellow: {
+            base: string;
+            content: string;
+        };
+        green: {
+            base: string;
+            content: string;
+        };
+        indigo: {
+            base: string;
+            content: string;
+        };
+        purple: {
+            base: string;
+            content: string;
+        };
+        pink: {
+            base: string;
+            content: string;
+        };
+        blue: {
+            base: string;
+            content: string;
+        };
+        dark: {
+            base: string;
+            content: string;
+        };
+    };
+    separators: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<{
+    embedded: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+    color: {
+        default: {
+            base: string;
+            content: string;
+        };
+        primary: {
+            base: string;
+            content: string;
+        };
+        secondary: {
+            base: string;
+            content: string;
+        };
+        gray: {
+            base: string;
+            content: string;
+        };
+        red: {
+            base: string;
+            content: string;
+        };
+        yellow: {
+            base: string;
+            content: string;
+        };
+        green: {
+            base: string;
+            content: string;
+        };
+        indigo: {
+            base: string;
+            content: string;
+        };
+        purple: {
+            base: string;
+            content: string;
+        };
+        pink: {
+            base: string;
+            content: string;
+        };
+        blue: {
+            base: string;
+            content: string;
+        };
+        dark: {
+            base: string;
+            content: string;
+        };
+    };
+    separators: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ToolbarGroupVariants = VariantProps<typeof toolbarGroup>;
+export declare const toolbarGroup: import("tailwind-variants").TVReturnType<{
+    spacing: {
+        default: string;
+        tight: string;
+        loose: string;
+    };
+    padding: {
+        default: string;
+        none: string;
+    };
+    position: {
+        middle: string;
+        first: string;
+        last: string;
+    };
+}, undefined, "flex items-center", {
+    spacing: {
+        default: string;
+        tight: string;
+        loose: string;
+    };
+    padding: {
+        default: string;
+        none: string;
+    };
+    position: {
+        middle: string;
+        first: string;
+        last: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    spacing: {
+        default: string;
+        tight: string;
+        loose: string;
+    };
+    padding: {
+        default: string;
+        none: string;
+    };
+    position: {
+        middle: string;
+        first: string;
+        last: string;
+    };
+}, undefined, "flex items-center", unknown, unknown, undefined>>;
+export type ToolbarButtonVariants = VariantProps<typeof toolbarButton>;
+export declare const toolbarButton: import("tailwind-variants").TVReturnType<{
+    color: {
+        dark: string;
+        gray: string;
+        red: string;
+        yellow: string;
+        green: string;
+        indigo: string;
+        purple: string;
+        pink: string;
+        blue: string;
+        primary: string;
+        default: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    background: {
+        true: string;
+        false: string;
+    };
+}, undefined, "focus:outline-hidden whitespace-normal", {
+    color: {
+        dark: string;
+        gray: string;
+        red: string;
+        yellow: string;
+        green: string;
+        indigo: string;
+        purple: string;
+        pink: string;
+        blue: string;
+        primary: string;
+        default: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    background: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        dark: string;
+        gray: string;
+        red: string;
+        yellow: string;
+        green: string;
+        indigo: string;
+        purple: string;
+        pink: string;
+        blue: string;
+        primary: string;
+        default: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    background: {
+        true: string;
+        false: string;
+    };
+}, undefined, "focus:outline-hidden whitespace-normal", unknown, unknown, undefined>>;

package/dist/toolbar/theme.js

@@ -0,0 +1,144 @@
+import { tv } from "tailwind-variants";
+export const toolbar = tv({
+    slots: {
+        base: "flex justify-between items-center",
+        content: "flex flex-wrap items-center"
+    },
+    variants: {
+        embedded: {
+            true: {},
+            false: {
+                base: "py-2 px-3 rounded-lg dark:border"
+            }
+        },
+        color: {
+            default: {
+                base: "bg-gray-50 dark:bg-gray-800 dark:border-gray-600",
+                content: "divide-gray-300 dark:divide-gray-800"
+            },
+            primary: {
+                base: "bg-primary-50 dark:bg-gray-800 dark:border-primary-800",
+                content: "divide-primary-300 dark:divide-primary-800"
+            },
+            secondary: {
+                base: "bg-secondary-50 dark:bg-gray-800 dark:border-secondary-800",
+                content: "divide-secondary-300 dark:divide-primary-800"
+            },
+            gray: {
+                base: "bg-gray-50 dark:bg-gray-800 dark:border-gray-800",
+                content: "divide-gray-300 dark:divide-gray-800"
+            },
+            red: {
+                base: "bg-red-50 dark:bg-gray-800 dark:border-red-800",
+                content: "divide-red-300 dark:divide-red-800"
+            },
+            yellow: {
+                base: "bg-yellow-50 dark:bg-gray-800 dark:border-yellow-800",
+                content: "divide-yellow-300 dark:divide-yellow-800"
+            },
+            green: {
+                base: "bg-green-50 dark:bg-gray-800 dark:border-green-800",
+                content: "divide-green-300 dark:divide-green-800"
+            },
+            indigo: {
+                base: "bg-indigo-50 dark:bg-gray-800 dark:border-indigo-800",
+                content: "divide-indigo-300 dark:divide-indigo-800"
+            },
+            purple: {
+                base: "bg-purple-50 dark:bg-gray-800 dark:border-purple-800",
+                content: "divide-purple-300 dark:divide-purple-800"
+            },
+            pink: {
+                base: "bg-pink-50 dark:bg-gray-800 dark:border-pink-800",
+                content: "divide-pink-300 dark:divide-pink-800"
+            },
+            blue: {
+                base: "bg-blue-50 dark:bg-gray-800 dark:border-blue-800",
+                content: "divide-blue-300 dark:divide-blue-800"
+            },
+            dark: {
+                base: "bg-gray-50 dark:bg-gray-800 dark:border-gray-800",
+                content: "divide-gray-300 dark:divide-gray-800"
+            }
+        },
+        separators: {
+            true: {
+                content: "sm:divide-x rtl:divide-x-reverse"
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            embedded: true,
+            color: "default",
+            class: {
+                base: "bg-transparent"
+            }
+        }
+    ]
+});
+export const toolbarGroup = tv({
+    base: "flex items-center",
+    variants: {
+        spacing: {
+            default: "space-x-1 rtl:space-x-reverse",
+            tight: "space-x-0.5 rtl:space-x-reverse",
+            loose: "space-x-2 rtl:space-x-reverse"
+        },
+        padding: {
+            default: "sm:not(:last):pe-4 sm:not(:first):ps-4",
+            none: ""
+        },
+        position: {
+            middle: "",
+            first: "sm:ps-0",
+            last: "sm:pe-0"
+        }
+    },
+    compoundVariants: [
+        {
+            position: ["first", "last"],
+            class: "sm:px-0"
+        }
+    ]
+});
+export const toolbarButton = tv({
+    base: "focus:outline-hidden whitespace-normal",
+    variants: {
+        color: {
+            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 dark:text-gray-400 dark:hover:text-gray-50"
+        },
+        size: {
+            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"
+        },
+        background: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            color: "default",
+            background: true,
+            class: "dark:hover:bg-gray-600"
+        },
+        {
+            color: "default",
+            background: false,
+            class: "dark:hover:bg-gray-700"
+        }
+    ]
+});

package/dist/toolbar/type.d.ts

@@ -0,0 +1,23 @@
+import { type Snippet } from "svelte";
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type { ToolbarButtonVariants, ToolbarVariants } from "./theme";
+interface ToolbarProps extends ToolbarVariants, Omit<HTMLAttributes<HTMLDivElement>, "color"> {
+    children: Snippet;
+    end?: Snippet;
+}
+type SpacingType = "default" | "tight" | "loose" | undefined;
+type PaddingType = "default" | "none" | undefined;
+type PositionType = "first" | "last" | "middle" | undefined;
+interface ToolbarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    class?: string;
+    spacing?: SpacingType;
+    padding?: PaddingType;
+    position?: PositionType;
+}
+type HTMLButtonOrAnchorAttributes = Omit<HTMLButtonAttributes & HTMLAnchorAttributes, "color">;
+interface ToolbarButtonProps extends ToolbarButtonVariants, HTMLButtonOrAnchorAttributes {
+    children: Snippet;
+    name?: string;
+}
+export type { ToolbarProps, ToolbarGroupProps, ToolbarButtonProps };

package/dist/toolbar/type.js

@@ -0,0 +1 @@
+import {} from "svelte";

package/dist/tooltip/Tooltip.svelte

@@ -1,30 +1,40 @@
-<script>import Popper from "../utils/Popper.svelte";
-import { twMerge } from "tailwind-merge";
-export let type = "dark";
-export let defaultClass = "py-2 px-3 text-sm font-medium";
-const types = {
-  dark: "bg-gray-900 text-white dark:bg-gray-700",
-  light: "border-gray-200 bg-white text-gray-900",
-  auto: " bg-white text-gray-900 dark:bg-gray-700 dark:text-white border-gray-200 dark:border-gray-700",
-  custom: ""
-};
-let toolTipClass;
-$: {
-  if ($$restProps.color) type = "custom";
-  else $$restProps.color = "none";
-  if (["light", "auto"].includes(type)) $$restProps.border = true;
-  toolTipClass = twMerge("tooltip", defaultClass, types[type], $$props.class);
-}
+<script lang="ts">
+  import clsx from "clsx";
+  import type { TriggeredToggleEvent } from "../utils/Popper.svelte";
+  import Popper from "../utils/Popper.svelte";
+  import { tooltip } from "./theme";
+  import type { TooltipProps } from "./type";
+
+  let { type = "dark", color = "default", trigger = "hover", arrow = true, children, placement = "top", onbeforetoggle: _onbeforetoggle, class: className, ...restProps }: TooltipProps = $props();
+
+  let { base, arrowBase } = $derived(tooltip({ color, arrow }));
+
+  function _onopen(ev: TriggeredToggleEvent) {
+    // block all focusable elements inside the tooltip
+    if (ev.target instanceof HTMLElement) {
+      ev.target.querySelectorAll('a, button, input, textarea, select, details, [tabindex], [contenteditable="true"]').forEach((element) => element.setAttribute("tabindex", "-1"));
+    }
+    // bubble event to parent
+    _onbeforetoggle?.(ev);
+  }
+
+  //   let popperClass = twMerge(commonClass, type === "light" ? light_class : dark_class, className);
 </script>
 
-<Popper rounded shadow {...$$restProps} class={toolTipClass} on:show>
-  <slot />
+<Popper {...restProps} {placement} border={false} {trigger} {arrow} class={base({ class: clsx(className) })} onbeforetoggle={_onopen}>
+  <div class="pointer-events-none">{@render children()}</div>
 </Popper>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let type: 'dark' | 'light' | 'auto' | 'custom' = 'dark';
-@prop export let defaultClass: string = 'py-2 px-3 text-sm font-medium';
+@props: type: any = "dark";
+@props:color: any = "default";
+@props:trigger: any = "hover";
+@props:arrow: any = true;
+@props:children: any;
+@props:placement: any = "top";
+@props:onbeforetoggle: any;
+@props:class: string;
 -->

package/dist/tooltip/Tooltip.svelte.d.ts

@@ -1,52 +1,26 @@
 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;
-    } & {
-        activeContent?: boolean;
-        arrow?: boolean;
-        offset?: number;
-        placement?: import("@floating-ui/dom").Placement;
-        trigger?: "hover" | "click" | "focus";
-        triggeredBy?: string;
-        reference?: string;
-        strategy?: "absolute" | "fixed";
-        open?: boolean;
-        yOnly?: boolean;
-    } & {
-        type?: "dark" | "light" | "auto" | "custom";
-        defaultClass?: string;
-    };
+    props: Record<string, never>;
     events: {
-        show: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type TooltipProps = typeof __propDef.props;
+type TooltipProps_ = typeof __propDef.props;
+export { TooltipProps_ as TooltipProps };
 export type TooltipEvents = typeof __propDef.events;
 export type TooltipSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let type: 'dark' | 'light' | 'auto' | 'custom' = 'dark';
- * @prop export let defaultClass: string = 'py-2 px-3 text-sm font-medium';
+ * @props: type: any = "dark";
+ * @props:color: any = "default";
+ * @props:trigger: any = "hover";
+ * @props:arrow: any = true;
+ * @props:children: any;
+ * @props:placement: any = "top";
+ * @props:onbeforetoggle: any;
+ * @props:class: string;
  */
-export default class Tooltip extends SvelteComponentTyped<TooltipProps, TooltipEvents, TooltipSlots> {
+export default class Tooltip extends SvelteComponentTyped<TooltipProps_, TooltipEvents, TooltipSlots> {
 }
-export {};

package/dist/tooltip/index.d.ts

@@ -0,0 +1,4 @@
+import type { TooltipProps } from "./type";
+import Tooltip from "./Tooltip.svelte";
+import { tooltip } from "./theme";
+export { Tooltip, tooltip, type TooltipProps };

package/dist/tooltip/index.js

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