@pajohns/flowbite-svelte 0.1.0

package/dist/typography/span/theme.d.ts

@@ -0,0 +1,246 @@
+import { type VariantProps } from "tailwind-variants";
+export type SpanVariants = VariantProps<typeof span>;
+export declare const span: import("tailwind-variants").TVReturnType<{
+    italic: {
+        true: string;
+    };
+    underline: {
+        true: string;
+    };
+    linethrough: {
+        true: string;
+    };
+    uppercase: {
+        true: string;
+    };
+    gradient: {
+        skyToEmerald: string;
+        purpleToBlue: string;
+        pinkToOrange: string;
+        tealToLime: string;
+        redToYellow: string;
+        indigoToCyan: string;
+        fuchsiaToRose: string;
+        amberToEmerald: string;
+        violetToRed: string;
+        blueToGreen: string;
+        orangeToPurple: string;
+        yellowToRed: string;
+        none: string;
+    };
+    highlight: {
+        blue: string;
+        green: string;
+        red: string;
+        yellow: string;
+        purple: string;
+        pink: string;
+        indigo: string;
+        teal: string;
+        orange: string;
+        cyan: string;
+        fuchsia: string;
+        amber: string;
+        lime: string;
+        none: string;
+    };
+    decoration: {
+        solid: string;
+        double: string;
+        dotted: string;
+        dashed: string;
+        wavy: string;
+        none: string;
+    };
+    decorationColor: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        orange: string;
+        red: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        none: string;
+    };
+    decorationThickness: {
+        "1": string;
+        "2": string;
+        "4": string;
+        "8": string;
+        "0": string;
+    };
+}, undefined, undefined, {
+    italic: {
+        true: string;
+    };
+    underline: {
+        true: string;
+    };
+    linethrough: {
+        true: string;
+    };
+    uppercase: {
+        true: string;
+    };
+    gradient: {
+        skyToEmerald: string;
+        purpleToBlue: string;
+        pinkToOrange: string;
+        tealToLime: string;
+        redToYellow: string;
+        indigoToCyan: string;
+        fuchsiaToRose: string;
+        amberToEmerald: string;
+        violetToRed: string;
+        blueToGreen: string;
+        orangeToPurple: string;
+        yellowToRed: string;
+        none: string;
+    };
+    highlight: {
+        blue: string;
+        green: string;
+        red: string;
+        yellow: string;
+        purple: string;
+        pink: string;
+        indigo: string;
+        teal: string;
+        orange: string;
+        cyan: string;
+        fuchsia: string;
+        amber: string;
+        lime: string;
+        none: string;
+    };
+    decoration: {
+        solid: string;
+        double: string;
+        dotted: string;
+        dashed: string;
+        wavy: string;
+        none: string;
+    };
+    decorationColor: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        orange: string;
+        red: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        none: string;
+    };
+    decorationThickness: {
+        "1": string;
+        "2": string;
+        "4": string;
+        "8": string;
+        "0": string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    italic: {
+        true: string;
+    };
+    underline: {
+        true: string;
+    };
+    linethrough: {
+        true: string;
+    };
+    uppercase: {
+        true: string;
+    };
+    gradient: {
+        skyToEmerald: string;
+        purpleToBlue: string;
+        pinkToOrange: string;
+        tealToLime: string;
+        redToYellow: string;
+        indigoToCyan: string;
+        fuchsiaToRose: string;
+        amberToEmerald: string;
+        violetToRed: string;
+        blueToGreen: string;
+        orangeToPurple: string;
+        yellowToRed: string;
+        none: string;
+    };
+    highlight: {
+        blue: string;
+        green: string;
+        red: string;
+        yellow: string;
+        purple: string;
+        pink: string;
+        indigo: string;
+        teal: string;
+        orange: string;
+        cyan: string;
+        fuchsia: string;
+        amber: string;
+        lime: string;
+        none: string;
+    };
+    decoration: {
+        solid: string;
+        double: string;
+        dotted: string;
+        dashed: string;
+        wavy: string;
+        none: string;
+    };
+    decorationColor: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        orange: string;
+        red: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        none: string;
+    };
+    decorationThickness: {
+        "1": string;
+        "2": string;
+        "4": string;
+        "8": string;
+        "0": string;
+    };
+}, undefined, undefined, unknown, unknown, undefined>>;

package/dist/typography/span/theme.js

@@ -0,0 +1,88 @@
+import { tv } from "tailwind-variants";
+export const span = tv({
+    variants: {
+        italic: {
+            true: "italic"
+        },
+        underline: {
+            true: "underline decoration-2 decoration-blue-400 dark:decoration-blue-600"
+        },
+        linethrough: {
+            true: "line-through"
+        },
+        uppercase: {
+            true: "uppercase"
+        },
+        gradient: {
+            skyToEmerald: "text-transparent bg-clip-text bg-linear-to-r to-emerald-600 from-sky-400",
+            purpleToBlue: "text-transparent bg-clip-text bg-linear-to-r from-purple-500 to-blue-500",
+            pinkToOrange: "text-transparent bg-clip-text bg-linear-to-r from-pink-500 to-orange-400",
+            tealToLime: "text-transparent bg-clip-text bg-linear-to-r from-teal-400 to-lime-300",
+            redToYellow: "text-transparent bg-clip-text bg-linear-to-r from-red-600 to-yellow-500",
+            indigoToCyan: "text-transparent bg-clip-text bg-linear-to-r from-indigo-600 to-cyan-400",
+            fuchsiaToRose: "text-transparent bg-clip-text bg-linear-to-r from-fuchsia-500 to-rose-500",
+            amberToEmerald: "text-transparent bg-clip-text bg-linear-to-r from-amber-400 to-emerald-500",
+            violetToRed: "text-transparent bg-clip-text bg-linear-to-r from-violet-600 to-red-500",
+            blueToGreen: "text-transparent bg-clip-text bg-linear-to-r from-blue-400 via-teal-500 to-green-400",
+            orangeToPurple: "text-transparent bg-clip-text bg-linear-to-r from-orange-400 via-pink-500 to-purple-500",
+            yellowToRed: "text-transparent bg-clip-text bg-linear-to-r from-yellow-200 via-indigo-400 to-red-600",
+            none: ""
+        },
+        highlight: {
+            blue: "text-blue-600 dark:text-blue-500",
+            green: "text-green-600 dark:text-green-500",
+            red: "text-red-600 dark:text-red-500",
+            yellow: "text-yellow-600 dark:text-yellow-500",
+            purple: "text-purple-600 dark:text-purple-500",
+            pink: "text-pink-600 dark:text-pink-500",
+            indigo: "text-indigo-600 dark:text-indigo-500",
+            teal: "text-teal-600 dark:text-teal-500",
+            orange: "text-orange-600 dark:text-orange-500",
+            cyan: "text-cyan-600 dark:text-cyan-500",
+            fuchsia: "text-fuchsia-600 dark:text-fuchsia-500",
+            amber: "text-amber-600 dark:text-amber-500",
+            lime: "text-lime-600 dark:text-lime-500",
+            none: ""
+        },
+        decoration: {
+            solid: "underline decoratio-solid",
+            double: "underline decoration-double",
+            dotted: "underline decoration-dotted",
+            dashed: "underline decoration-dashed",
+            wavy: "underline decoration-wavy",
+            none: "decoration-none"
+        },
+        decorationColor: {
+            // blue, green, red, yellow, purple, pink, indigo, teal, orange, cyan, fuchsia, amber, lime, none
+            // radio
+            // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+            primary: "underline decoration-primary-400 dark:decoration-primary-600",
+            secondary: "underline decoration-secondary-400 dark:decoration-secondary-600",
+            gray: "underline decoration-gray-400 dark:decoration-gray-600",
+            orange: "underline decoration-orange-400 dark:decoration-orange-600",
+            red: "underline decoration-red-400 dark:decoration-red-600",
+            yellow: "underline decoration-yellow-400 dark:decoration-yellow-600",
+            lime: "underline decoration-lime-400 dark:decoration-lime-600",
+            green: "underline decoration-green-400 dark:decoration-green-600",
+            emerald: "underline decoration-emerald-400 dark:decoration-emerald-600",
+            teal: "underline decoration-teal-400 dark:decoration-teal-600",
+            cyan: "underline decoration-cyan-400 dark:decoration-cyan-600",
+            sky: "underline decoration-sky-400 dark:decoration-sky-600",
+            blue: "underline decoration-blue-400 dark:decoration-blue-600",
+            indigo: "underline decoration-indigo-400 dark:decoration-indigo-600",
+            violet: "underline decoration-violet-400 dark:decoration-violet-600",
+            purple: "underline decoration-purple-400 dark:decoration-purple-600",
+            fuchsia: "underline decoration-fuchsia-400 dark:decoration-fuchsia-600",
+            pink: "underline decoration-pink-400 dark:decoration-pink-600",
+            rose: "underline decoration-rose-400 dark:decoration-rose-600",
+            none: "decoration-none"
+        },
+        decorationThickness: {
+            "1": "underline decoration-1",
+            "2": "underline decoration-2",
+            "4": "underline decoration-4",
+            "8": "underline decoration-8",
+            "0": "decoration-0"
+        }
+    }
+});

package/dist/uiHelpers.svelte.d.ts

@@ -0,0 +1,10 @@
+export declare function uiHelpers(): {
+    isOpen: boolean;
+    toggle: () => void;
+    close: () => void;
+    open: () => void;
+};
+export declare function clickOutside(element: HTMLElement, callbackFunction: (event: MouseEvent) => void): {
+    update(newCallbackFunction: (event: MouseEvent) => void): void;
+    destroy(): void;
+};

package/dist/uiHelpers.svelte.js

@@ -0,0 +1,50 @@
+export function uiHelpers() {
+    let isOpen = $state(false);
+    function toggle() {
+        isOpen = !isOpen;
+    }
+    function close() {
+        isOpen = false;
+    }
+    function open() {
+        isOpen = true;
+    }
+    return {
+        get isOpen() {
+            return isOpen;
+        },
+        set isOpen(value) {
+            isOpen = value;
+        },
+        toggle,
+        close,
+        open
+    };
+}
+export function clickOutside(element, callbackFunction) {
+    const onClick = (event) => {
+        if (typeof callbackFunction === "function") {
+            const targetNode = event.target;
+            if (!element.contains(targetNode)) {
+                callbackFunction(event);
+            }
+        }
+        else {
+            console.error("Callback function is not a function");
+        }
+    };
+    element.ownerDocument.body.addEventListener("click", onClick);
+    return {
+        update(newCallbackFunction) {
+            if (typeof newCallbackFunction === "function") {
+                callbackFunction = newCallbackFunction;
+            }
+            else {
+                console.error("New callback function is not a function");
+            }
+        },
+        destroy() {
+            element.ownerDocument.body.removeEventListener("click", onClick);
+        }
+    };
+}

package/dist/utils/Arrow.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import type { Side } from "@floating-ui/dom";
+  import { getOppositePlacement, getSide } from "@floating-ui/utils";
+  import type { ArrowProps } from "../types";
+
+  let { placement = "top", cords, class: className = "" }: ArrowProps = $props();
+
+  const px = (n: number | undefined) => (n ? `${n}px` : "");
+
+  // Prevent unused import warnings - these functions are used in the $effect below
+  void getSide;
+  void getOppositePlacement;
+
+  function getBorderWidth(element: HTMLElement) {
+    const computedStyle = window.getComputedStyle(element);
+    return Math.max(parseFloat(computedStyle.borderLeftWidth), parseFloat(computedStyle.borderBottomWidth)) - 0.3;
+  }
+
+  const rotationMap: Record<Side, string> = {
+    left: " rotate-45",
+    right: " -rotate-135",
+    top: " rotate-135",
+    bottom: " -rotate-45"
+  };
+
+  function positioning(node: HTMLElement) {
+    $effect(() => {
+      node.style.left = px(cords.x);
+      node.style.top = px(cords.y);
+      node.style.right = "";
+      node.style.bottom = "";
+
+      let arrowSide = getSide(getOppositePlacement(placement));
+      // node.style[arrowSide] = px(-node.offsetWidth / 2 - (border ? 1 : 0) + 1);
+      node.style[arrowSide] = px(-node.offsetWidth / 2 - getBorderWidth(node));
+
+      // node.classList.remove("border-t", "border-b", "border-s", "border-e");
+      // border && (node.className += arrowBordersMap[arrowSide]);
+
+      node.classList.remove("rotate-45", "-rotate-45", "rotate-135", "-rotate-135");
+      node.className += rotationMap[arrowSide];
+    });
+  }
+</script>
+
+<div use:positioning class="popover-arrow clip pointer-events-none absolute block h-[10px] w-[10px] border-b border-l border-inherit bg-inherit text-inherit {className}"></div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2186)
+## Props
+@prop placement = "top"
+@prop cords
+@prop class: className = ""
+-->
+
+<style>
+  :global(.clip) {
+    clip-path: polygon(0 0, 0% 100%, 100% 100%, 100% 85%, 15% 0);
+  }
+</style>

package/dist/utils/Arrow.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { ArrowProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2186)
+ * ## Props
+ * @prop placement = "top"
+ * @prop cords
+ * @prop class: className = ""
+ */
+declare const Arrow: import("svelte").Component<ArrowProps, {}, "">;
+type Arrow = ReturnType<typeof Arrow>;
+export default Arrow;

package/dist/utils/CloseButton.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import type { CloseButtonProps } from "../types";
+  import { closeButton } from "./theme";
+  import { useDismiss } from "./dismissable";
+
+  let { children, color = "gray", onclick: onclickorg, name = "Close", ariaLabel, size = "md", class: className, svgClass, ...restProps }: CloseButtonProps = $props();
+
+  const { base, svg } = $derived(closeButton({ color, size }));
+
+  const context = useDismiss();
+
+  function onclick(event: MouseEvent) {
+    onclickorg?.(event);
+    if (event.defaultPrevented) return;
+    context?.dismiss?.(event);
+  }
+</script>
+
+{#if restProps.href === undefined}
+  <button type="button" {...restProps} class={base({ class: clsx(className) })} {onclick} aria-label={ariaLabel ?? name}>
+    {#if name}<span class="sr-only">{name}</span>{/if}
+    {#if children}
+      {@render children()}
+    {:else}
+      <svg class={svg({ class: svgClass })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path
+          fill-rule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    {/if}
+  </button>
+{:else}
+  <a {...restProps} {onclick} class={base({ class: clsx(className) })} aria-label={ariaLabel ?? name}>
+    {#if name}<span class="sr-only">{name}</span>{/if}
+    {#if children}
+      {@render children()}
+    {:else}
+      <svg class={svg()} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path
+          fill-rule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    {/if}
+  </a>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L146)
+## Props
+@prop children
+@prop color = "gray"
+@prop onclick: onclickorg
+@prop name = "Close"
+@prop ariaLabel
+@prop size = "md"
+@prop class: className
+@prop svgClass
+@prop ...restProps
+-->

package/dist/utils/CloseButton.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { CloseButtonProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L146)
+ * ## Props
+ * @prop children
+ * @prop color = "gray"
+ * @prop onclick: onclickorg
+ * @prop name = "Close"
+ * @prop ariaLabel
+ * @prop size = "md"
+ * @prop class: className
+ * @prop svgClass
+ * @prop ...restProps
+ */
+declare const CloseButton: import("svelte").Component<CloseButtonProps, {}, "">;
+type CloseButton = ReturnType<typeof CloseButton>;
+export default CloseButton;