@pajohns/flowbite-svelte 0.1.0

package/dist/navbar/NavHamburger.svelte.d.ts

@@ -0,0 +1,131 @@
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1203)
+ * ## Props
+ * @prop children
+ * @prop onclick
+ * @prop menuClass
+ * @prop class: className
+ * @prop classes
+ * @prop name = "Open main menu"
+ * @prop ...restProps
+ */
+declare const NavHamburger: import("svelte").Component<import("../toolbar/theme").ToolbarButtonVariants & {
+    href?: undefined;
+} & import("svelte/elements").HTMLButtonAttributes & {
+    name?: string;
+} & import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    menu: string;
+}, undefined, {
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    menu: string;
+}, import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    menu: string;
+}, undefined, unknown, unknown, undefined>>> & import("../theme/themeUtils").Classes<import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    menu: string;
+}, undefined, {
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    menu: string;
+}, import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    menu: string;
+}, undefined, unknown, unknown, undefined>>> & {
+    href?: undefined;
+    menuClass?: import("svelte/elements").ClassValue;
+}, {}, "">;
+type NavHamburger = ReturnType<typeof NavHamburger>;
+export default NavHamburger;

package/dist/navbar/NavLi.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { getTheme } from "../theme/themeUtils";
+  import type { NavLiProps } from "../types";
+  import clsx from "clsx";
+  import { navbarLi } from "./theme";
+  import { getNavbarStateContext, getNavbarBreakpointContext } from "../context";
+
+  let navState = getNavbarStateContext();
+  let navBreakpoint = getNavbarBreakpointContext();
+
+  let { children, onclick, activeClass, nonActiveClass, class: className, ...restProps }: NavLiProps = $props();
+
+  const theme = $derived(getTheme("navbarLi"));
+
+  let active = $derived(navState?.activeUrl ? restProps.href === navState.activeUrl : false);
+  let liClass = $derived(
+    navbarLi({
+      breakpoint: navBreakpoint ?? "md",
+      hidden: navState?.hidden ?? true,
+      class: clsx(active ? (activeClass ?? navState?.activeClass) : (nonActiveClass ?? navState?.nonActiveClass), theme, className)
+    })
+  );
+
+  function handleClick(event: MouseEvent) {
+    // Close the mobile menu when a link is clicked
+    if (navState && restProps.href !== undefined && !navState.hidden) {
+      navState.hidden = true;
+    }
+
+    // Call original onclick handler if provided
+    if (onclick) {
+      // Cast the handler to accept a standard MouseEvent
+      (onclick as (event: MouseEvent) => void)(event);
+    }
+  }
+</script>
+
+<li>
+  {#if restProps.href === undefined}
+    <button role="presentation" onclick={handleClick} {...restProps} class={liClass}>
+      {@render children?.()}
+    </button>
+  {:else}
+    <a {...restProps} class={liClass} onclick={handleClick}>
+      {@render children?.()}
+    </a>
+  {/if}
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1224)
+## Props
+@prop children
+@prop onclick
+@prop activeClass
+@prop nonActiveClass
+@prop class: className
+@prop ...restProps
+-->

package/dist/navbar/NavLi.svelte.d.ts

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

package/dist/navbar/NavUl.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import type { NavUlProps } from "../types";
+  import clsx from "clsx";
+  import { sineIn } from "svelte/easing";
+  import { prefersReducedMotion } from "svelte/motion";
+  import { fade, fly, scale, slide } from "svelte/transition";
+  import { navbarUl } from "./theme";
+  import { getNavbarStateContext, getNavbarBreakpointContext } from "../context";
+  import { untrack } from "svelte";
+
+  let navState = getNavbarStateContext();
+  let navBreakpoint = getNavbarBreakpointContext();
+
+  let {
+    children,
+    activeUrl = $bindable(),
+    ulClass,
+    slideParams,
+    transition = slide,
+    transitionParams,
+    activeClass,
+    nonActiveClass,
+    respectMotionPreference = true,
+    class: className,
+    classes,
+    ...restProps
+  }: NavUlProps = $props();
+
+  warnThemeDeprecation(
+    "NavUl",
+    untrack(() => ({ ulClass, activeClass, nonActiveClass })),
+    { ulClass: "ul", activeClass: "active", nonActiveClass: "nonActive" }
+  );
+
+  const styling = $derived(classes ?? { ul: ulClass, active: activeClass, nonActive: nonActiveClass });
+
+  const theme = $derived(getTheme("navbarUl"));
+
+  // Default parameters for different transitions
+  const getDefaultParams = (transitionFn: typeof slide | typeof fly | typeof fade | typeof scale) => {
+    if (transitionFn === slide) return { delay: 0, duration: 200, easing: sineIn };
+    if (transitionFn === fly) return { delay: 0, duration: 200, y: -10, easing: sineIn };
+    if (transitionFn === fade) return { delay: 0, duration: 200, easing: sineIn };
+    if (transitionFn === scale) return { delay: 0, duration: 200, start: 0.95, easing: sineIn };
+    return { delay: 0, duration: 200, easing: sineIn };
+  };
+
+  // Support legacy slideParams prop
+  const defaultParams = $derived(getDefaultParams(transition));
+  const finalParams = $derived(transitionParams ?? slideParams ?? defaultParams);
+
+  // Create motion-aware parameters
+  const transitionOptions = $derived(() => {
+    if (respectMotionPreference && prefersReducedMotion.current) {
+      return { ...finalParams, duration: 0, delay: 0 };
+    }
+    return finalParams;
+  });
+
+  let hidden: boolean = $derived(navState?.hidden ?? true);
+
+  let { base, ul, active, nonActive } = $derived(navbarUl({ hidden, breakpoint: navBreakpoint ?? "md" }));
+
+  $effect(() => {
+    if (!navState) return;
+    navState.activeClass = active({ class: clsx(theme?.active, styling.active) });
+    navState.nonActiveClass = nonActive({ class: clsx(theme?.nonActive, styling.nonActive) });
+    navState.activeUrl = activeUrl;
+  });
+
+  let divCls: string = $derived(base({ class: clsx(theme?.base, className) }));
+  let ulCls: string = $derived(ul({ class: clsx(theme?.ul, styling.ul) }));
+</script>
+
+{#if !hidden}
+  <div {...restProps} class={divCls} transition:transition={transitionOptions()}>
+    <ul class={ulCls}>
+      {@render children?.()}
+    </ul>
+  </div>
+{:else}
+  <div {...restProps} class={divCls}>
+    <ul class={ulCls}>
+      {@render children?.()}
+    </ul>
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1209)
+## Props
+@prop children
+@prop activeUrl = $bindable()
+@prop ulClass
+@prop slideParams
+@prop transition = slide
+@prop transitionParams
+@prop activeClass
+@prop nonActiveClass
+@prop respectMotionPreference = true
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

package/dist/navbar/NavUl.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { NavUlProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1209)
+ * ## Props
+ * @prop children
+ * @prop activeUrl = $bindable()
+ * @prop ulClass
+ * @prop slideParams
+ * @prop transition = slide
+ * @prop transitionParams
+ * @prop activeClass
+ * @prop nonActiveClass
+ * @prop respectMotionPreference = true
+ * @prop class: className
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const NavUl: import("svelte").Component<NavUlProps, {}, "activeUrl">;
+type NavUl = ReturnType<typeof NavUl>;
+export default NavUl;

package/dist/navbar/Navbar.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import NavContainer from "./NavContainer.svelte";
+  import { navbar } from "./theme";
+  import type { NavbarState, NavbarProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
+  import { setNavbarStateContext, setNavbarBreakpointContext } from "../context";
+
+  let { children, fluid, navContainerClass, class: className, closeOnClickOutside = true, breakpoint = "md", ...restProps }: NavbarProps = $props();
+
+  const theme = $derived(getTheme("navbar"));
+
+  let navState = $state<NavbarState>({ hidden: true });
+  setNavbarStateContext(navState);
+
+  $effect(() => {
+    setNavbarBreakpointContext(breakpoint);
+  });
+
+  // Add reference to the navbar element
+  let navbarElement: HTMLElement;
+
+  let toggle = () => {
+    navState.hidden = !navState.hidden;
+  };
+
+  function handleDocumentClick(event: MouseEvent) {
+    if (!closeOnClickOutside) return;
+    // Check if the click was outside the navbar AND the dropdown is open
+    if (!navState.hidden && navbarElement && !navbarElement.contains(event.target as Node)) {
+      navState.hidden = true;
+    }
+  }
+</script>
+
+<svelte:document onclick={handleDocumentClick} />
+
+<nav bind:this={navbarElement}>
+  <div {...restProps} class={navbar({ class: clsx(theme, className) })}>
+    <NavContainer {fluid} class={clsx(navContainerClass)}>
+      {@render children({ hidden: navState.hidden, toggle, NavContainer })}
+    </NavContainer>
+  </div>
+</nav>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1189)
+## Props
+@prop children
+@prop fluid
+@prop navContainerClass
+@prop class: className
+@prop closeOnClickOutside = true
+@prop breakpoint = "md"
+@prop ...restProps
+-->

package/dist/navbar/Navbar.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { NavbarProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1189)
+ * ## Props
+ * @prop children
+ * @prop fluid
+ * @prop navContainerClass
+ * @prop class: className
+ * @prop closeOnClickOutside = true
+ * @prop breakpoint = "md"
+ * @prop ...restProps
+ */
+declare const Navbar: import("svelte").Component<NavbarProps, {}, "">;
+type Navbar = ReturnType<typeof Navbar>;
+export default Navbar;

package/dist/navbar/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Navbar } from "./Navbar.svelte";
+export { default as NavBrand } from "./NavBrand.svelte";
+export { default as NavLi } from "./NavLi.svelte";
+export { default as NavUl } from "./NavUl.svelte";
+export { default as NavHamburger } from "./NavHamburger.svelte";
+export { default as NavContainer } from "./NavContainer.svelte";
+export { navbar, navbarUl, navbarBrand, navbarLi, navbarHamburger, navbarContainer } from "./theme";

package/dist/navbar/index.js

@@ -0,0 +1,7 @@
+export { default as Navbar } from "./Navbar.svelte";
+export { default as NavBrand } from "./NavBrand.svelte";
+export { default as NavLi } from "./NavLi.svelte";
+export { default as NavUl } from "./NavUl.svelte";
+export { default as NavHamburger } from "./NavHamburger.svelte";
+export { default as NavContainer } from "./NavContainer.svelte";
+export { navbar, navbarUl, navbarBrand, navbarLi, navbarHamburger, navbarContainer } from "./theme";

package/dist/navbar/theme.d.ts

@@ -0,0 +1,233 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type NavbarBreakpoint = "sm" | "md" | "lg" | "xl";
+export type NavbarUlVariants = VariantProps<typeof navbarUl> & Classes<typeof navbarUl>;
+export type NavbarHamburgerVariants = VariantProps<typeof navbarHamburger> & Classes<typeof navbarHamburger>;
+export declare const navbar: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative w-full px-2 py-2.5 sm:px-4", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "relative w-full px-2 py-2.5 sm:px-4", unknown, unknown, undefined>>;
+export declare const navbarBrand: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex items-center", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "flex items-center", unknown, unknown, undefined>>;
+export declare const navbarContainer: import("tailwind-variants").TVReturnType<{
+    fluid: {
+        true: string;
+        false: string;
+    };
+}, undefined, "mx-auto flex flex-wrap items-center justify-between ", {
+    fluid: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    fluid: {
+        true: string;
+        false: string;
+    };
+}, undefined, "mx-auto flex flex-wrap items-center justify-between ", unknown, unknown, undefined>>;
+export declare const navbarUl: import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+        md: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+        lg: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+        xl: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+    };
+    hidden: {
+        false: {
+            base: string;
+            ul: string;
+        };
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    ul: string;
+    active: string;
+    nonActive: string;
+}, undefined, {
+    breakpoint: {
+        sm: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+        md: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+        lg: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+        xl: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+    };
+    hidden: {
+        false: {
+            base: string;
+            ul: string;
+        };
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    ul: string;
+    active: string;
+    nonActive: string;
+}, import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+        md: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+        lg: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+        xl: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+    };
+    hidden: {
+        false: {
+            base: string;
+            ul: string;
+        };
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    ul: string;
+    active: string;
+    nonActive: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const navbarLi: import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    hidden: {
+        false: string;
+    };
+}, undefined, "block py-2 pe-4 ps-3 rounded-sm", {
+    breakpoint: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    hidden: {
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    hidden: {
+        false: string;
+    };
+}, undefined, "block py-2 pe-4 ps-3 rounded-sm", unknown, unknown, undefined>>;
+export declare const navbarHamburger: import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    menu: string;
+}, undefined, {
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    menu: string;
+}, import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    menu: string;
+}, undefined, unknown, unknown, undefined>>;