@pajohns/flowbite-svelte 0.1.0

package/dist/pagination/theme.d.ts

@@ -0,0 +1,228 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type PaginationNavVariants = VariantProps<typeof paginationNav> & Classes<typeof paginationNav>;
+export type PaginationVariants = VariantProps<typeof pagination>;
+export type PaginationItemVariants = VariantProps<typeof paginationItem>;
+export declare const paginationNav: import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    layout: {
+        table: {
+            prev: string;
+            next: string;
+        };
+        navigation: {
+            prev: string;
+            next: string;
+        };
+        pagination: {
+            prev: string;
+            next: string;
+        };
+    };
+}, {
+    base: string;
+    tableDiv: string;
+    span: string;
+    prev: string;
+    next: string;
+    active: string;
+}, undefined, {
+    size: {
+        default: string;
+        large: string;
+    };
+    layout: {
+        table: {
+            prev: string;
+            next: string;
+        };
+        navigation: {
+            prev: string;
+            next: string;
+        };
+        pagination: {
+            prev: string;
+            next: string;
+        };
+    };
+}, {
+    base: string;
+    tableDiv: string;
+    span: string;
+    prev: string;
+    next: string;
+    active: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    layout: {
+        table: {
+            prev: string;
+            next: string;
+        };
+        navigation: {
+            prev: string;
+            next: string;
+        };
+        pagination: {
+            prev: string;
+            next: string;
+        };
+    };
+}, {
+    base: string;
+    tableDiv: string;
+    span: string;
+    prev: string;
+    next: string;
+    active: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const paginationButton: import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex items-center font-medium", {
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex items-center font-medium", unknown, unknown, undefined>>;
+export declare const paginationItem: import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex items-center font-medium", {
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex items-center font-medium", unknown, unknown, undefined>>;
+export declare const pagination: import("tailwind-variants").TVReturnType<{
+    table: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+}, undefined, "inline-flex -space-x-px rtl:space-x-reverse items-center", {
+    table: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    table: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+}, undefined, "inline-flex -space-x-px rtl:space-x-reverse items-center", unknown, unknown, undefined>>;

package/dist/pagination/theme.js

@@ -0,0 +1,118 @@
+import { tv } from "tailwind-variants";
+export const paginationNav = tv({
+    slots: {
+        base: "inline-flex -space-x-px rtl:space-x-reverse items-center",
+        tableDiv: "flex items-center text-sm mb-4",
+        span: "font-semibold mx-1",
+        prev: "rounded-none",
+        next: "rounded-none",
+        active: ""
+    },
+    variants: {
+        size: {
+            default: "",
+            large: ""
+        },
+        layout: {
+            table: {
+                prev: "rounded-s bg-gray-800 hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white text-white  hover:text-gray-200",
+                next: "text-white bg-gray-800 border-0 border-s border-gray-700 rounded-e hover:bg-gray-900 hover:text-gray-200 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+            },
+            navigation: { prev: "rounded-s-lg", next: "rounded-e-lg" },
+            pagination: { prev: "rounded-s-lg", next: "rounded-e-lg" }
+        }
+    },
+    defaultVariants: {
+        table: false,
+        size: "default"
+    }
+});
+export const paginationButton = tv({
+    base: "flex items-center font-medium",
+    variants: {
+        size: {
+            default: "h-8 px-3 text-sm",
+            large: "h-10 px-4 text-base"
+        },
+        active: {
+            true: "text-primary-600 border border-gray-300 bg-primary-50 hover:bg-primary-100 hover:text-primary-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white",
+            false: "text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+        },
+        group: {
+            true: "",
+            false: "rounded-lg"
+        },
+        table: {
+            true: "rounded-sm",
+            false: "border"
+        },
+        disabled: {
+            true: "cursor-not-allowed opacity-50",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            group: false,
+            table: false,
+            class: "rounded-lg"
+        }
+    ],
+    defaultVariants: {
+        size: "default",
+        active: false,
+        group: false,
+        table: false
+    }
+});
+export const paginationItem = tv({
+    base: "flex items-center font-medium",
+    variants: {
+        size: {
+            default: "h-8 px-3 text-sm",
+            large: "h-10 px-4 text-base"
+        },
+        active: {
+            true: "text-primary-600 border border-gray-300 bg-primary-50 hover:bg-primary-100 hover:text-primary-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white",
+            false: "text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+        },
+        group: {
+            true: "",
+            false: "rounded-lg"
+        },
+        table: {
+            true: "rounded-sm",
+            false: "border"
+        }
+    },
+    compoundVariants: [
+        {
+            group: false,
+            table: false,
+            class: "rounded-lg"
+        }
+    ],
+    defaultVariants: {
+        size: "default",
+        active: false,
+        group: false,
+        table: false
+    }
+});
+export const pagination = tv({
+    base: "inline-flex -space-x-px rtl:space-x-reverse items-center",
+    variants: {
+        table: {
+            true: "divide-x rtl:divide-x-reverse dark divide-gray-700 dark:divide-gray-700",
+            false: ""
+        },
+        size: {
+            default: "",
+            large: ""
+        }
+    },
+    defaultVariants: {
+        table: false,
+        size: "default"
+    }
+});

package/dist/popover/Popover.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import Popper from "../utils/Popper.svelte";
+  import { popover } from "./theme";
+  import type { PopoverProps } from "../types";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
+
+  let {
+    title: titleSlot,
+    color = "default",
+    trigger = "hover",
+    defaultClass,
+    arrow = true,
+    children,
+    placement = "top",
+    class: className,
+    classes,
+    isOpen = $bindable(false),
+    ...restProps
+  }: PopoverProps = $props();
+
+  warnThemeDeprecation(
+    "Popover",
+    untrack(() => ({ defaultClass })),
+    { defaultClass: "content" }
+  );
+
+  const styling = $derived(classes ?? { content: defaultClass });
+
+  const theme = $derived(getTheme("popover"));
+
+  let { base, title, h3, content } = $derived(popover({ color }));
+</script>
+
+<Popper {...restProps} bind:isOpen {placement} {trigger} {arrow} class={base({ class: clsx(theme?.base, className) })}>
+  {#if typeof titleSlot === "string"}
+    <div class={title({ class: clsx(theme?.title, classes?.title) })}>
+      <h3 class={h3({ class: clsx(theme?.h3, classes?.h3) })}>{titleSlot}</h3>
+    </div>
+  {:else if titleSlot}
+    {@render titleSlot()}
+  {/if}
+  <div class={content({ class: clsx(theme?.content, styling.content) })}>
+    {@render children()}
+  </div>
+</Popper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1306)
+## Props
+@prop title: titleSlot
+@prop color = "default"
+@prop trigger = "hover"
+@prop defaultClass
+@prop arrow = true
+@prop children
+@prop placement = "top"
+@prop class: className
+@prop classes
+@prop isOpen = $bindable(false)
+@prop ...restProps
+-->

package/dist/popover/Popover.svelte.d.ts

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

package/dist/popover/index.d.ts

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

package/dist/popover/index.js

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

package/dist/popover/theme.d.ts

@@ -0,0 +1,280 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type PopoverVariants = VariantProps<typeof popover> & Classes<typeof popover>;
+export declare const popover: import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            title: string;
+            h3: string;
+        };
+        primary: {
+            title: string;
+            h3: string;
+        };
+        secondary: {
+            title: string;
+            h3: string;
+        };
+        gray: {
+            title: string;
+            h3: string;
+        };
+        red: {
+            title: string;
+            h3: string;
+        };
+        orange: {
+            title: string;
+            h3: string;
+        };
+        amber: {
+            title: string;
+            h3: string;
+        };
+        yellow: {
+            title: string;
+            h3: string;
+        };
+        lime: {
+            title: string;
+            h3: string;
+        };
+        green: {
+            title: string;
+            h3: string;
+        };
+        emerald: {
+            title: string;
+            h3: string;
+        };
+        teal: {
+            title: string;
+            h3: string;
+        };
+        cyan: {
+            title: string;
+            h3: string;
+        };
+        sky: {
+            title: string;
+            h3: string;
+        };
+        blue: {
+            title: string;
+            h3: string;
+        };
+        indigo: {
+            title: string;
+            h3: string;
+        };
+        violet: {
+            title: string;
+            h3: string;
+        };
+        purple: {
+            title: string;
+            h3: string;
+        };
+        fuchsia: {
+            title: string;
+            h3: string;
+        };
+        pink: {
+            title: string;
+            h3: string;
+        };
+        rose: {
+            title: string;
+            h3: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    title: string;
+    h3: string;
+}, undefined, {
+    color: {
+        default: {
+            title: string;
+            h3: string;
+        };
+        primary: {
+            title: string;
+            h3: string;
+        };
+        secondary: {
+            title: string;
+            h3: string;
+        };
+        gray: {
+            title: string;
+            h3: string;
+        };
+        red: {
+            title: string;
+            h3: string;
+        };
+        orange: {
+            title: string;
+            h3: string;
+        };
+        amber: {
+            title: string;
+            h3: string;
+        };
+        yellow: {
+            title: string;
+            h3: string;
+        };
+        lime: {
+            title: string;
+            h3: string;
+        };
+        green: {
+            title: string;
+            h3: string;
+        };
+        emerald: {
+            title: string;
+            h3: string;
+        };
+        teal: {
+            title: string;
+            h3: string;
+        };
+        cyan: {
+            title: string;
+            h3: string;
+        };
+        sky: {
+            title: string;
+            h3: string;
+        };
+        blue: {
+            title: string;
+            h3: string;
+        };
+        indigo: {
+            title: string;
+            h3: string;
+        };
+        violet: {
+            title: string;
+            h3: string;
+        };
+        purple: {
+            title: string;
+            h3: string;
+        };
+        fuchsia: {
+            title: string;
+            h3: string;
+        };
+        pink: {
+            title: string;
+            h3: string;
+        };
+        rose: {
+            title: string;
+            h3: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    title: string;
+    h3: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            title: string;
+            h3: string;
+        };
+        primary: {
+            title: string;
+            h3: string;
+        };
+        secondary: {
+            title: string;
+            h3: string;
+        };
+        gray: {
+            title: string;
+            h3: string;
+        };
+        red: {
+            title: string;
+            h3: string;
+        };
+        orange: {
+            title: string;
+            h3: string;
+        };
+        amber: {
+            title: string;
+            h3: string;
+        };
+        yellow: {
+            title: string;
+            h3: string;
+        };
+        lime: {
+            title: string;
+            h3: string;
+        };
+        green: {
+            title: string;
+            h3: string;
+        };
+        emerald: {
+            title: string;
+            h3: string;
+        };
+        teal: {
+            title: string;
+            h3: string;
+        };
+        cyan: {
+            title: string;
+            h3: string;
+        };
+        sky: {
+            title: string;
+            h3: string;
+        };
+        blue: {
+            title: string;
+            h3: string;
+        };
+        indigo: {
+            title: string;
+            h3: string;
+        };
+        violet: {
+            title: string;
+            h3: string;
+        };
+        purple: {
+            title: string;
+            h3: string;
+        };
+        fuchsia: {
+            title: string;
+            h3: string;
+        };
+        pink: {
+            title: string;
+            h3: string;
+        };
+        rose: {
+            title: string;
+            h3: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    title: string;
+    h3: string;
+}, undefined, unknown, unknown, undefined>>;