@pajohns/flowbite-svelte 0.1.0

package/dist/banner/theme.d.ts

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

package/dist/banner/theme.js

@@ -0,0 +1,45 @@
+import { tv } from "tailwind-variants";
+export const banner = tv({
+    slots: {
+        base: "fixed z-50 flex justify-between p-4 mx-auto dark:bg-gray-700 dark:border-gray-600",
+        insideDiv: "flex flex-col md:flex-row md:items-center gap-2 mx-auto",
+        dismissable: "absolute end-2.5 top-2.5 md:static md:end-auto md:top-auto"
+    },
+    variants: {
+        type: {
+            top: {
+                base: "top-0 start-0 w-full border-b border-gray-200 bg-gray-50"
+            },
+            bottom: {
+                base: "bottom-0 start-0 w-full border-t border-gray-200 bg-gray-50"
+            }
+        },
+        color: {
+            // 'primary' secondary, | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'
+            primary: { base: "bg-primary-50 dark:bg-primary-900" },
+            secondary: { base: "bg-secondary-50 dark:bg-secondary-900" },
+            gray: { base: "bg-gray-50 dark:bg-gray-700" },
+            red: { base: "bg-red-50 dark:bg-red-900" },
+            orange: { base: "bg-orange-50 dark:bg-orange-900" },
+            amber: { base: "bg-amber-50 dark:bg-amber-900" },
+            yellow: { base: "bg-yellow-50 dark:bg-yellow-900" },
+            lime: { base: "bg-lime-50 dark:bg-lime-900" },
+            green: { base: "bg-green-50 dark:bg-green-900" },
+            emerald: { base: "bg-emerald-50 dark:bg-emerald-900" },
+            teal: { base: "bg-teal-50 dark:bg-teal-900" },
+            cyan: { base: "bg-cyan-50 dark:bg-cyan-900" },
+            sky: { base: "bg-sky-50 dark:bg-sky-900" },
+            blue: { base: "bg-blue-50 dark:bg-blue-900" },
+            indigo: { base: "bg-indigo-50 dark:bg-indigo-900" },
+            violet: { base: "bg-violet-50 dark:bg-violet-900" },
+            purple: { base: "bg-purple-50 dark:bg-purple-900" },
+            fuchsia: { base: "bg-fuchsia-50 dark:bg-fuchsia-900" },
+            pink: { base: "bg-pink-50 dark:bg-pink-900" },
+            rose: { base: "bg-rose-50 dark:bg-rose-900" }
+        }
+    },
+    defaultVariants: {
+        type: "top",
+        multiline: true
+    }
+});

package/dist/bottom-navigation/BottomNav.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { BottomNavContextType, BottomNavProps } from "../types";
+  import { cn } from "../utils";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import clsx from "clsx";
+  import { setBottomNavContext } from "../context";
+  import { bottomNav } from "./theme";
+  import { untrack } from "svelte";
+
+  let { children, header, position = "fixed", navType = "default", class: className, classes, outerClass, innerClass, activeClass, activeUrl = "", ...restProps }: BottomNavProps = $props();
+
+  warnThemeDeprecation(
+    "BottomNav",
+    untrack(() => ({ innerClass, outerClass })),
+    { innerClass: "inner", outerClass: "class" }
+  );
+
+  const styling = $derived(classes ?? { inner: innerClass });
+
+  // Theme context
+  const theme = $derived(getTheme("bottomNav"));
+
+  const activeCls = $derived(cn("text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900", activeClass));
+
+  // Create reactive context using getters
+  const reactiveCtx: BottomNavContextType = {
+    get activeClass() {
+      return activeCls;
+    },
+    get activeUrl() {
+      return activeUrl;
+    },
+    get navType() {
+      return navType;
+    }
+  };
+
+  setBottomNavContext(reactiveCtx);
+
+  const { base, inner } = $derived(bottomNav({ position, navType }));
+</script>
+
+<div {...restProps} class={base({ class: clsx(theme?.base, className ?? outerClass) })}>
+  {#if header}
+    {@render header()}
+  {/if}
+
+  <div class={inner({ class: clsx(theme?.inner, styling.inner) })}>
+    {@render children()}
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[BottomNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L271)
+## Props
+@prop children
+@prop header
+@prop position = "fixed"
+@prop navType = "default"
+@prop class: className
+@prop classes
+@prop outerClass
+@prop innerClass
+@prop activeClass
+@prop activeUrl = ""
+@prop ...restProps
+-->

package/dist/bottom-navigation/BottomNav.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { BottomNavProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [BottomNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L271)
+ * ## Props
+ * @prop children
+ * @prop header
+ * @prop position = "fixed"
+ * @prop navType = "default"
+ * @prop class: className
+ * @prop classes
+ * @prop outerClass
+ * @prop innerClass
+ * @prop activeClass
+ * @prop activeUrl = ""
+ * @prop ...restProps
+ */
+declare const BottomNav: import("svelte").Component<BottomNavProps, {}, "">;
+type BottomNav = ReturnType<typeof BottomNav>;
+export default BottomNav;

package/dist/bottom-navigation/BottomNavHeader.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { bottomNavHeader } from "./theme";
+  import clsx from "clsx";
+  import type { BottomNavHeaderProps } from "..";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
+
+  let { children, class: className, classes, outerClass, innerClass, ...restProps }: BottomNavHeaderProps = $props();
+
+  warnThemeDeprecation(
+    "BottomNavHeader",
+    untrack(() => ({ innerClass, outerClass })),
+    { innerClass: "inner", outerClass: "class" }
+  );
+
+  const styling = $derived(classes ?? { innerDiv: innerClass });
+
+  // Theme context
+  const theme = $derived(getTheme("bottomNavHeader"));
+
+  const { innerDiv, base } = $derived(bottomNavHeader());
+</script>
+
+<div {...restProps} class={base({ class: clsx(theme?.base, className ?? outerClass) })}>
+  <div class={innerDiv({ class: clsx(theme?.innerDiv, styling.innerDiv) })} role="group">
+    {@render children()}
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[BottomNavHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L290)
+## Props
+@prop children
+@prop class: className
+@prop classes
+@prop outerClass
+@prop innerClass
+@prop ...restProps
+-->

package/dist/bottom-navigation/BottomNavHeader.svelte.d.ts

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

package/dist/bottom-navigation/BottomNavHeaderItem.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { bottomNavHeaderItem } from "./theme";
+  import clsx from "clsx";
+  import type { BottomNavHeaderItemProps } from "..";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { itemName, active, class: className, ...restProps }: BottomNavHeaderItemProps = $props();
+
+  // Theme context
+  const theme = $derived(getTheme("bottomNavHeaderItem"));
+
+  let base = $derived(bottomNavHeaderItem({ active, class: clsx(theme, className) }));
+</script>
+
+<button {...restProps} class={base}>
+  {itemName}
+</button>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[BottomNavHeaderItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L296)
+## Props
+@prop itemName
+@prop active
+@prop class: className
+@prop ...restProps
+-->

package/dist/bottom-navigation/BottomNavHeaderItem.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { BottomNavHeaderItemProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [BottomNavHeaderItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L296)
+ * ## Props
+ * @prop itemName
+ * @prop active
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const BottomNavHeaderItem: import("svelte").Component<BottomNavHeaderItemProps, {}, "">;
+type BottomNavHeaderItem = ReturnType<typeof BottomNavHeaderItem>;
+export default BottomNavHeaderItem;

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import type { BottomNavItemProps } from "..";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import clsx from "clsx";
+  import { getBottomNavContext } from "../context";
+  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+  import { bottomNavItem } from "./theme";
+  import { untrack } from "svelte";
+
+  let { children, btnName, appBtnPosition = "middle", activeClass, class: className, classes, btnClass, spanClass, active: manualActive, ...restProps }: BottomNavItemProps = $props();
+
+  warnThemeDeprecation(
+    "BottomNavItem",
+    untrack(() => ({ spanClass, btnClass })),
+    { spanClass: "span", btnClass: "class" }
+  );
+
+  const styling = $derived(classes ?? { span: spanClass });
+
+  // Theme context
+  const theme = $derived(getTheme("bottomNavItem"));
+
+  const context = getBottomNavContext();
+
+  let navUrl = $derived(context?.activeUrl || "");
+
+  const { base, span } = $derived(bottomNavItem({ navType: context?.navType, appBtnPosition }));
+
+  // Determine active state based on manual prop or URL matching
+  let isActive = $derived.by(() => {
+    const href = restProps.href ?? "";
+    return manualActive !== undefined
+      ? !!manualActive
+      : navUrl
+        ? href === "/"
+          ? navUrl === "/"
+          : href && (navUrl === href || navUrl.startsWith(href + "/") || (href !== "/" && navUrl.replace(/^https?:\/\/[^/]+/, "").startsWith(href)))
+        : false;
+  });
+
+  function getCommonClass() {
+    return base({ class: clsx(isActive && (activeClass ?? context?.activeClass), theme?.base, className ?? btnClass) });
+  }
+
+  function getSpanClass() {
+    return span({ class: clsx(isActive && (activeClass ?? context?.activeClass), theme?.span, styling.span) });
+  }
+
+  /* eslint-disable  @typescript-eslint/no-explicit-any */
+  const commonProps: Record<string, any> = $derived({
+    "aria-label": btnName,
+    class: getCommonClass(),
+    ...restProps
+  });
+
+  const anchorProps: HTMLAnchorAttributes = $derived({
+    ...commonProps
+  });
+
+  const buttonProps: HTMLButtonAttributes = $derived({
+    ...commonProps,
+    type: "button" as const
+  });
+</script>
+
+{#if restProps.href === undefined}
+  <button {...buttonProps}>
+    {@render children()}
+    <span class={getSpanClass()}>{btnName}</span>
+  </button>
+{:else}
+  <a {...anchorProps}>
+    {@render children()}
+    <span class={getSpanClass()}>{btnName}</span>
+  </a>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L280)
+## Props
+@prop children
+@prop btnName
+@prop appBtnPosition = "middle"
+@prop activeClass
+@prop class: className
+@prop classes
+@prop btnClass
+@prop spanClass
+@prop active: manualActive
+@prop ...restProps
+-->

package/dist/bottom-navigation/BottomNavItem.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { BottomNavItemProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L280)
+ * ## Props
+ * @prop children
+ * @prop btnName
+ * @prop appBtnPosition = "middle"
+ * @prop activeClass
+ * @prop class: className
+ * @prop classes
+ * @prop btnClass
+ * @prop spanClass
+ * @prop active: manualActive
+ * @prop ...restProps
+ */
+declare const BottomNavItem: import("svelte").Component<BottomNavItemProps, {}, "">;
+type BottomNavItem = ReturnType<typeof BottomNavItem>;
+export default BottomNavItem;

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

@@ -0,0 +1,5 @@
+export { default as BottomNav } from "./BottomNav.svelte";
+export { default as BottomNavItem } from "./BottomNavItem.svelte";
+export { default as BottomNavHeaderItem } from "./BottomNavHeaderItem.svelte";
+export { default as BottomNavHeader } from "./BottomNavHeader.svelte";
+export { bottomNav, bottomNavItem, bottomNavHeader, bottomNavHeaderItem } from "./theme";

package/dist/bottom-navigation/index.js

@@ -0,0 +1,5 @@
+export { default as BottomNav } from "./BottomNav.svelte";
+export { default as BottomNavItem } from "./BottomNavItem.svelte";
+export { default as BottomNavHeaderItem } from "./BottomNavHeaderItem.svelte";
+export { default as BottomNavHeader } from "./BottomNavHeader.svelte";
+export { bottomNav, bottomNavItem, bottomNavHeader, bottomNavHeaderItem } from "./theme";