@pajohns/flowbite-svelte 0.1.0

package/dist/bottom-navigation/theme.d.ts

@@ -0,0 +1,349 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type BottomNavVariants = VariantProps<typeof bottomNav> & Classes<typeof bottomNav>;
+export type BottomNavItemVariants = VariantProps<typeof bottomNavItem> & Classes<typeof bottomNavItem>;
+export type BottomNavHeaderVariants = VariantProps<typeof bottomNavHeader> & Classes<typeof bottomNavHeader>;
+export type BottomNavHeaderItemVariants = VariantProps<typeof bottomNavHeaderItem>;
+export declare const bottomNav: import("tailwind-variants").TVReturnType<{
+    position: {
+        static: {
+            base: string;
+        };
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+        relative: {
+            base: string;
+        };
+        sticky: {
+            base: string;
+        };
+    };
+    navType: {
+        default: {
+            base: string;
+        };
+        border: {
+            base: string;
+        };
+        application: {
+            base: string;
+        };
+        pagination: {
+            base: string;
+        };
+        group: {
+            base: string;
+        };
+        card: {
+            base: string;
+        };
+        meeting: {
+            base: string;
+            inner: string;
+        };
+        video: {
+            base: string;
+            inner: string;
+        };
+    };
+}, {
+    base: string;
+    inner: string;
+}, undefined, {
+    position: {
+        static: {
+            base: string;
+        };
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+        relative: {
+            base: string;
+        };
+        sticky: {
+            base: string;
+        };
+    };
+    navType: {
+        default: {
+            base: string;
+        };
+        border: {
+            base: string;
+        };
+        application: {
+            base: string;
+        };
+        pagination: {
+            base: string;
+        };
+        group: {
+            base: string;
+        };
+        card: {
+            base: string;
+        };
+        meeting: {
+            base: string;
+            inner: string;
+        };
+        video: {
+            base: string;
+            inner: string;
+        };
+    };
+}, {
+    base: string;
+    inner: string;
+}, import("tailwind-variants").TVReturnType<{
+    position: {
+        static: {
+            base: string;
+        };
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+        relative: {
+            base: string;
+        };
+        sticky: {
+            base: string;
+        };
+    };
+    navType: {
+        default: {
+            base: string;
+        };
+        border: {
+            base: string;
+        };
+        application: {
+            base: string;
+        };
+        pagination: {
+            base: string;
+        };
+        group: {
+            base: string;
+        };
+        card: {
+            base: string;
+        };
+        meeting: {
+            base: string;
+            inner: string;
+        };
+        video: {
+            base: string;
+            inner: string;
+        };
+    };
+}, {
+    base: string;
+    inner: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const bottomNavItem: import("tailwind-variants").TVReturnType<{
+    navType: {
+        default: {
+            base: string;
+            span: string;
+        };
+        border: {
+            base: string;
+            span: string;
+        };
+        application: {
+            base: string;
+            span: string;
+        };
+        pagination: {
+            base: string;
+            span: string;
+        };
+        group: {
+            base: string;
+            span: string;
+        };
+        card: {
+            base: string;
+            span: string;
+        };
+        meeting: {
+            base: string;
+            span: string;
+        };
+        video: {
+            base: string;
+            span: string;
+        };
+    };
+    appBtnPosition: {
+        left: {
+            base: string;
+        };
+        middle: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    span: string;
+}, undefined, {
+    navType: {
+        default: {
+            base: string;
+            span: string;
+        };
+        border: {
+            base: string;
+            span: string;
+        };
+        application: {
+            base: string;
+            span: string;
+        };
+        pagination: {
+            base: string;
+            span: string;
+        };
+        group: {
+            base: string;
+            span: string;
+        };
+        card: {
+            base: string;
+            span: string;
+        };
+        meeting: {
+            base: string;
+            span: string;
+        };
+        video: {
+            base: string;
+            span: string;
+        };
+    };
+    appBtnPosition: {
+        left: {
+            base: string;
+        };
+        middle: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    span: string;
+}, import("tailwind-variants").TVReturnType<{
+    navType: {
+        default: {
+            base: string;
+            span: string;
+        };
+        border: {
+            base: string;
+            span: string;
+        };
+        application: {
+            base: string;
+            span: string;
+        };
+        pagination: {
+            base: string;
+            span: string;
+        };
+        group: {
+            base: string;
+            span: string;
+        };
+        card: {
+            base: string;
+            span: string;
+        };
+        meeting: {
+            base: string;
+            span: string;
+        };
+        video: {
+            base: string;
+            span: string;
+        };
+    };
+    appBtnPosition: {
+        left: {
+            base: string;
+        };
+        middle: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    span: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const bottomNavHeader: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            innerDiv?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            innerDiv?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    innerDiv: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            innerDiv?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    innerDiv: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    innerDiv: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const bottomNavHeaderItem: import("tailwind-variants").TVReturnType<{
+    active: {
+        true: string;
+        false: string;
+    };
+}, undefined, "px-5 py-1.5 text-xs font-medium rounded-lg", {
+    active: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    active: {
+        true: string;
+        false: string;
+    };
+}, undefined, "px-5 py-1.5 text-xs font-medium rounded-lg", unknown, unknown, undefined>>;

package/dist/bottom-navigation/theme.js

@@ -0,0 +1,113 @@
+import { tv } from "tailwind-variants";
+export const bottomNav = tv({
+    slots: {
+        base: "w-full z-30 border-gray-200 dark:bg-gray-700 dark:border-gray-600",
+        inner: "grid h-full max-w-lg mx-auto"
+    },
+    variants: {
+        position: {
+            static: { base: "static" },
+            fixed: { base: "fixed" },
+            absolute: { base: "absolute" },
+            relative: { base: "relative" },
+            sticky: { base: "sticky" }
+        },
+        navType: {
+            default: { base: "bottom-0 start-0 h-16 bg-white border-t" },
+            border: { base: "bottom-0 start-0 h-16 bg-white border-t" },
+            application: {
+                base: "h-16 max-w-lg -translate-x-1/2 rtl:translate-x-1/2 bg-white border rounded-full bottom-4 start-1/2"
+            },
+            pagination: {
+                base: "bottom-0 h-16 -translate-x-1/2 rtl:translate-x-1/2 bg-white border-t start-1/2"
+            },
+            group: {
+                base: "bottom-0 -translate-x-1/2 rtl:translate-x-1/2 bg-white border-t start-1/2"
+            },
+            card: { base: "bottom-0 start-0 h-16 bg-white border-t" },
+            meeting: {
+                base: "bottom-0 start-0 grid h-16 grid-cols-1 px-8 bg-white border-t md:grid-cols-3",
+                inner: "flex items-center justify-center mx-auto"
+            },
+            video: {
+                base: "bottom-0 start-0 grid h-24 grid-cols-1 px-8 bg-white border-t md:grid-cols-3",
+                inner: "flex items-center w-full"
+            }
+        }
+    },
+    defaultVariants: {
+        position: "fixed",
+        navType: "default"
+    }
+});
+export const bottomNavItem = tv({
+    slots: {
+        base: "inline-flex flex-col items-center justify-center",
+        span: "text-sm"
+    },
+    variants: {
+        navType: {
+            default: {
+                base: "px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group",
+                span: "text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
+            },
+            border: {
+                base: "px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600",
+                span: "text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
+            },
+            application: {
+                base: "",
+                span: "sr-only"
+            },
+            pagination: {
+                base: "px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group",
+                span: "sr-only"
+            },
+            group: {
+                base: "p-4 hover:bg-gray-50 dark:hover:bg-gray-800 group",
+                span: "sr-only"
+            },
+            card: {
+                base: "px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group",
+                span: "text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
+            },
+            meeting: {
+                base: "",
+                span: ""
+            },
+            video: {
+                base: "",
+                span: ""
+            }
+        },
+        appBtnPosition: {
+            left: {
+                base: "px-5 rounded-s-full hover:bg-gray-50 dark:hover:bg-gray-800 group"
+            },
+            middle: { base: "px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group" },
+            right: {
+                base: "px-5 rounded-e-full hover:bg-gray-50 dark:hover:bg-gray-800 group"
+            }
+        }
+    },
+    defaultVariants: {
+        navType: "default",
+        appBtnPosition: "middle",
+        active: false
+    }
+});
+export const bottomNavHeader = tv({
+    slots: {
+        base: "w-full",
+        innerDiv: "grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600"
+    }
+});
+export const bottomNavHeaderItem = tv({
+    base: "px-5 py-1.5 text-xs font-medium rounded-lg",
+    variants: {
+        active: {
+            true: "text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900",
+            false: "text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700"
+        }
+    }
+});

package/dist/breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { breadcrumb } from "./theme";
+  import clsx from "clsx";
+  import type { BreadcrumbProps } from "..";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
+
+  let { children, solid = false, class: className, classes, olClass, ariaLabel = "Breadcrumb", ...restProps }: BreadcrumbProps = $props();
+
+  warnThemeDeprecation(
+    "Breadcrumb",
+    untrack(() => ({ olClass })),
+    { olClass: "list" }
+  );
+
+  const styling = $derived(classes ?? { list: olClass });
+
+  const theme = $derived(getTheme("breadcrumb"));
+
+  const { base, list } = $derived(breadcrumb({ solid }));
+  let classNav = $derived(base({ class: clsx(theme?.base, className) }));
+  let classList = $derived(list({ class: clsx(theme?.list, styling.list) }));
+</script>
+
+<nav aria-label={ariaLabel} {...restProps} class={classNav}>
+  <ol class={classList}>
+    {@render children()}
+  </ol>
+</nav>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[BreadcrumbProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L302)
+## Props
+@prop children
+@prop solid = false
+@prop class: className
+@prop classes
+@prop olClass
+@prop ariaLabel = "Breadcrumb"
+@prop ...restProps
+-->

package/dist/breadcrumb/Breadcrumb.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { BreadcrumbProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [BreadcrumbProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L302)
+ * ## Props
+ * @prop children
+ * @prop solid = false
+ * @prop class: className
+ * @prop classes
+ * @prop olClass
+ * @prop ariaLabel = "Breadcrumb"
+ * @prop ...restProps
+ */
+declare const Breadcrumb: import("svelte").Component<BreadcrumbProps, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/breadcrumb/BreadcrumbItem.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import type { BreadcrumbItemProps } from "..";
+  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
+  import { breadcrumbItem } from "./theme";
+
+  let { children, icon, home = false, href, linkClass, spanClass, homeClass, class: className, classes, ...restProps }: BreadcrumbItemProps = $props();
+
+  const styling = $derived(classes ?? {});
+
+  const theme = $derived(getTheme("breadcrumbItem"));
+
+  const { base, separator } = $derived(
+    breadcrumbItem({
+      home,
+      hasHref: !!href
+    })
+  );
+</script>
+
+<li {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  {#if home}
+    <a class={base({ home: true, class: clsx(theme?.base, homeClass) })} {href}>
+      {#if icon}
+        {@render icon()}
+      {:else}
+        <svg class="me-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
+          />
+        </svg>
+      {/if}
+
+      {@render children()}
+    </a>
+  {:else}
+    {#if icon}
+      {@render icon()}
+    {:else}
+      <svg class={separator({ class: clsx(theme?.separator, styling.separator) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+      </svg>
+    {/if}
+
+    {#if href}
+      <a class={base({ home: false, hasHref: true, class: clsx(theme?.base, linkClass) })} {href}>
+        {@render children()}
+      </a>
+    {:else}
+      <span class={base({ home: false, hasHref: false, class: clsx(theme?.base, spanClass) })}>
+        {@render children()}
+      </span>
+    {/if}
+  {/if}
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[BreadcrumbItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L309)
+## Props
+@prop children
+@prop icon
+@prop home = false
+@prop href
+@prop linkClass
+@prop spanClass
+@prop homeClass
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

package/dist/breadcrumb/BreadcrumbItem.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { BreadcrumbItemProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [BreadcrumbItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L309)
+ * ## Props
+ * @prop children
+ * @prop icon
+ * @prop home = false
+ * @prop href
+ * @prop linkClass
+ * @prop spanClass
+ * @prop homeClass
+ * @prop class: className
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const BreadcrumbItem: import("svelte").Component<BreadcrumbItemProps, {}, "">;
+type BreadcrumbItem = ReturnType<typeof BreadcrumbItem>;
+export default BreadcrumbItem;

package/dist/breadcrumb/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Breadcrumb } from "./Breadcrumb.svelte";
+export { default as BreadcrumbItem } from "./BreadcrumbItem.svelte";
+export { breadcrumb, breadcrumbItem } from "./theme";

package/dist/breadcrumb/index.js

@@ -0,0 +1,3 @@
+export { default as Breadcrumb } from "./Breadcrumb.svelte";
+export { default as BreadcrumbItem } from "./BreadcrumbItem.svelte";
+export { breadcrumb, breadcrumbItem } from "./theme";

package/dist/breadcrumb/theme.d.ts

@@ -0,0 +1,72 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type BreadcrumbVariants = VariantProps<typeof breadcrumb> & Classes<typeof breadcrumb>;
+export type BreadcrumbItemVariants = VariantProps<typeof breadcrumbItem> & Classes<typeof breadcrumbItem>;
+export declare const breadcrumb: import("tailwind-variants").TVReturnType<{
+    solid: {
+        true: {
+            base: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    list: string;
+}, undefined, {
+    solid: {
+        true: {
+            base: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    list: string;
+}, import("tailwind-variants").TVReturnType<{
+    solid: {
+        true: {
+            base: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    list: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const breadcrumbItem: import("tailwind-variants").TVReturnType<{
+    home: {
+        true: string;
+        false: string;
+    };
+    hasHref: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+    separator: string;
+}, undefined, {
+    home: {
+        true: string;
+        false: string;
+    };
+    hasHref: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+    separator: string;
+}, import("tailwind-variants").TVReturnType<{
+    home: {
+        true: string;
+        false: string;
+    };
+    hasHref: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;