@pajohns/flowbite-svelte 0.1.0

package/dist/toolbar/ToolbarButton.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { toolbarButton } from "./theme";
+  import type { ToolbarButtonProps } from "../types";
+  import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { children, color, name, "aria-label": ariaLabel, size, class: className, ...restProps }: ToolbarButtonProps = $props();
+
+  const theme = $derived(getTheme("toolbarButton"));
+
+  const buttonCls = $derived(
+    toolbarButton({
+      color,
+      size,
+      background: false,
+      class: clsx(theme, className)
+    })
+  );
+</script>
+
+{#if restProps.href === undefined}
+  <button type="button" {...restProps} class={buttonCls} aria-label={ariaLabel ?? name}>
+    {#if name}<span class="sr-only">{name}</span>{/if}
+    {@render children?.()}
+  </button>
+{:else}
+  <a {...restProps} class={buttonCls} aria-label={ariaLabel ?? name}>
+    {#if name}<span class="sr-only">{name}</span>{/if}
+    {@render children?.()}
+  </a>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ToolbarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1236)
+## Props
+@prop children
+@prop color
+@prop name
+@prop "aria-label": ariaLabel
+@prop size
+@prop class: className
+@prop ...restProps
+-->

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

@@ -0,0 +1,17 @@
+import type { ToolbarButtonProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ToolbarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1236)
+ * ## Props
+ * @prop children
+ * @prop color
+ * @prop name
+ * @prop "aria-label": ariaLabel
+ * @prop size
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const ToolbarButton: import("svelte").Component<ToolbarButtonProps, {}, "">;
+type ToolbarButton = ReturnType<typeof ToolbarButton>;
+export default ToolbarButton;

package/dist/toolbar/ToolbarGroup.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { getTheme } from "../theme/themeUtils";
+  import type { ToolbarGroupProps } from "../types";
+  import clsx from "clsx";
+  import { getToolbarContext } from "../context";
+  import { toolbarGroup } from "./theme";
+
+  let { children, spacing, padding, position = "middle", class: className, ...restProps }: ToolbarGroupProps = $props();
+
+  const theme = $derived(getTheme("toolbarGroup"));
+
+  const groupCls = $derived(toolbarGroup({ spacing, padding, position, class: clsx(theme, className) }));
+
+  const ctx = getToolbarContext();
+
+  if (ctx) ctx.separators = true;
+</script>
+
+<div {...restProps} class={groupCls}>
+  {@render children?.()}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ToolbarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1234)
+## Props
+@prop children
+@prop spacing
+@prop padding
+@prop position = "middle"
+@prop class: className
+@prop ...restProps
+-->

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

@@ -0,0 +1,16 @@
+import type { ToolbarGroupProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ToolbarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1234)
+ * ## Props
+ * @prop children
+ * @prop spacing
+ * @prop padding
+ * @prop position = "middle"
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const ToolbarGroup: import("svelte").Component<ToolbarGroupProps, {}, "">;
+type ToolbarGroup = ReturnType<typeof ToolbarGroup>;
+export default ToolbarGroup;

package/dist/toolbar/index.d.ts

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

package/dist/toolbar/index.js

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

package/dist/toolbar/theme.d.ts

@@ -0,0 +1,320 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type ToolbarVariants = VariantProps<typeof toolbar> & Classes<typeof toolbar>;
+export type ToolbarGroupVariants = VariantProps<typeof toolbarGroup>;
+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 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,155 @@
+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"
+            }
+        }
+    ],
+    defaultVariants: {
+        color: "default"
+    }
+});
+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"
+        }
+    ],
+    defaultVariants: {
+        spacing: "default",
+        padding: "default"
+    }
+});
+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"
+        }
+    ],
+    defaultVariants: {
+        color: "default",
+        size: "md"
+    }
+});

package/dist/tooltip/Tooltip.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import Popper from "../utils/Popper.svelte";
+  import { tooltip } from "./theme";
+  import type { TooltipProps, TriggeredToggleEvent } from "../types";
+
+  let {
+    type = "dark",
+    color = undefined,
+    trigger = "hover",
+    arrow = true,
+    children,
+    placement = "top",
+    onbeforetoggle: _onbeforetoggle,
+    class: className,
+    isOpen = $bindable(false),
+    ...restProps
+  }: TooltipProps = $props();
+
+  const base = $derived(tooltip({ color, type, class: clsx(className) }));
+  function onbeforetoggle(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);
+  }
+</script>
+
+<Popper {...restProps} bind:isOpen {placement} {trigger} {arrow} class={base} {onbeforetoggle}>
+  <div class="pointer-events-none">{@render children()}</div>
+</Popper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2001)
+## Props
+@prop type = "dark"
+@prop color = undefined
+@prop trigger = "hover"
+@prop arrow = true
+@prop children
+@prop placement = "top"
+@prop onbeforetoggle: _onbeforetoggle
+@prop class: className
+@prop isOpen = $bindable(false)
+@prop ...restProps
+-->

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

@@ -0,0 +1,20 @@
+import type { TooltipProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2001)
+ * ## Props
+ * @prop type = "dark"
+ * @prop color = undefined
+ * @prop trigger = "hover"
+ * @prop arrow = true
+ * @prop children
+ * @prop placement = "top"
+ * @prop onbeforetoggle: _onbeforetoggle
+ * @prop class: className
+ * @prop isOpen = $bindable(false)
+ * @prop ...restProps
+ */
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "isOpen">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from "./Tooltip.svelte";
+export { tooltip } from "./theme";

package/dist/tooltip/index.js

@@ -0,0 +1,2 @@
+export { default as Tooltip } from "./Tooltip.svelte";
+export { tooltip } from "./theme";