@pajohns/flowbite-svelte 0.1.0

package/dist/sidebar/Sidebar.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { SidebarProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [SidebarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1453)
+ * ## Props
+ * @prop children
+ * @prop isOpen = false
+ * @prop closeSidebar
+ * @prop isSingle = true
+ * @prop breakpoint = "md"
+ * @prop alwaysOpen = false
+ * @prop position = "fixed"
+ * @prop activateClickOutside = true
+ * @prop backdrop = true
+ * @prop backdropClass
+ * @prop transition = fly
+ * @prop params
+ * @prop divClass
+ * @prop ariaLabel
+ * @prop nonActiveClass
+ * @prop activeClass
+ * @prop activeUrl = ""
+ * @prop class: className
+ * @prop classes
+ * @prop disableBreakpoints = false
+ * @prop ...restProps
+ */
+declare const Sidebar: import("svelte").Component<SidebarProps, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/sidebar/SidebarBrand.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { sidebarBrand } from "./theme";
+  import type { SidebarBrandProps } from "../types";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
+
+  let { children, site, imgClass, spanClass, class: className, classes, ...restProps }: SidebarBrandProps = $props();
+
+  warnThemeDeprecation(
+    "SidebarBrand",
+    untrack(() => ({ imgClass, spanClass })),
+    { imgClass: "img", spanClass: "span" }
+  );
+
+  const styling = $derived(
+    classes ?? {
+      img: imgClass,
+      span: spanClass
+    }
+  );
+
+  const theme = $derived(getTheme("sidebarBrand"));
+
+  const { base, img, span } = $derived(sidebarBrand());
+</script>
+
+<a {...restProps} href={site?.href ? site.href : "/"} class={base({ class: clsx(theme?.base, className) })}>
+  {#if site}
+    <img src={site.img} class={img({ class: clsx(theme?.img, styling.img) })} alt={site.name} />
+    <span class={span({ class: clsx(theme?.span, styling.span) })}>{site.name}</span>
+  {:else if children}
+    {@render children()}
+  {/if}
+</a>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[SidebarBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1490)
+## Props
+@prop children
+@prop site
+@prop imgClass
+@prop spanClass
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

package/dist/sidebar/SidebarBrand.svelte.d.ts

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

package/dist/sidebar/SidebarButton.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { sidebarButton } from "./theme";
+  import type { SidebarButtonProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { breakpoint = "md", class: className, classes, ...restProps }: SidebarButtonProps = $props();
+
+  const theme = $derived(getTheme("sidebarButton"));
+
+  const { base, svg } = $derived(sidebarButton({ breakpoint }));
+</script>
+
+<button {...restProps} type="button" class={base({ class: clsx(theme?.base, className) })}>
+  <span class="sr-only">Open sidebar</span>
+  <svg class={svg({ class: clsx(theme?.svg, classes?.svg) })} aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path
+      clip-rule="evenodd"
+      fill-rule="evenodd"
+      d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"
+    ></path>
+  </svg>
+</button>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[SidebarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1472)
+## Props
+@prop breakpoint = "md"
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

package/dist/sidebar/SidebarButton.svelte.d.ts

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

package/dist/sidebar/SidebarCta.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { sidebarCta } from "./theme";
+  import type { SidebarCtaProps } from "../types";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
+
+  let { children, icon, divClass, spanClass, label, class: className, classes, ...restProps }: SidebarCtaProps = $props();
+
+  warnThemeDeprecation(
+    "SidebarCta",
+    untrack(() => ({ divClass, spanClass })),
+    { divClass: "div", spanClass: "span" }
+  );
+
+  const styling = $derived(
+    classes ?? {
+      div: divClass,
+      span: spanClass
+    }
+  );
+
+  const theme = $derived(getTheme("sidebarCta"));
+
+  const { base, div, span } = $derived(sidebarCta());
+</script>
+
+<div {...restProps} id="dropdown-cta" class={base({ class: clsx(theme?.base, className) })} role="alert">
+  <div class={div({ class: clsx(theme?.div, styling.div) })}>
+    <span class={span({ class: clsx(theme?.span, styling.span) })}>{label}</span>
+    {#if icon}
+      {@render icon()}
+    {/if}
+  </div>
+  {@render children?.()}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[SidebarCtaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1477)
+## Props
+@prop children
+@prop icon
+@prop divClass
+@prop spanClass
+@prop label
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

package/dist/sidebar/SidebarCta.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { SidebarCtaProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [SidebarCtaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1477)
+ * ## Props
+ * @prop children
+ * @prop icon
+ * @prop divClass
+ * @prop spanClass
+ * @prop label
+ * @prop class: className
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const SidebarCta: import("svelte").Component<SidebarCtaProps, {}, "">;
+type SidebarCta = ReturnType<typeof SidebarCta>;
+export default SidebarCta;

package/dist/sidebar/SidebarDropdownWrapper.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import type { ParamsType, SidebarDropdownWrapperProps } from "../types";
+  import clsx from "clsx";
+  import { getSidebarContext } from "../context";
+  import { writable } from "svelte/store";
+  import { slide } from "svelte/transition";
+  import { sidebarDropdownWrapper } from "./theme";
+  import { untrack } from "svelte";
+
+  let {
+    children,
+    arrowup,
+    arrowdown,
+    icon,
+    isOpen = $bindable(),
+    btnClass,
+    label,
+    spanClass,
+    ulClass,
+    transition = slide,
+    params,
+    svgClass,
+    class: className,
+    classes,
+    onclick,
+    ...restProps
+  }: SidebarDropdownWrapperProps = $props();
+
+  warnThemeDeprecation(
+    "SidebarDropdownWrapper",
+    untrack(() => ({ btnClass, spanClass, ulClass, svgClass })),
+    { btnClass: "btn", spanClass: "span", ulClass: "ul", svgClass: "svg" }
+  );
+
+  const styling = $derived(
+    classes ?? {
+      btn: btnClass,
+      span: spanClass,
+      ul: ulClass,
+      svg: svgClass
+    }
+  );
+
+  const theme = $derived(getTheme("sidebarDropdownWrapper"));
+  const { base, btn, span, svg, ul } = sidebarDropdownWrapper();
+  const isControlled = $derived(isOpen !== undefined);
+
+  let ctx = getSidebarContext() || { isSingle: false };
+
+  let self = {};
+
+  if (ctx.isSingle && !ctx.selected) {
+    ctx.selected = writable<object | null>(null);
+  }
+
+  const selectedStore = $derived(ctx.selected);
+  let localOpen = $state(false);
+
+  const openState = $derived(isControlled ? isOpen : ctx.isSingle ? $selectedStore === self : localOpen);
+
+  function handleDropdown() {
+    if (isControlled) {
+      isOpen = !isOpen;
+    } else if (ctx.isSingle) {
+      ctx.selected!.update((current) => (current === self ? null : self));
+    } else {
+      localOpen = !localOpen;
+    }
+
+    if (onclick) onclick();
+  }
+</script>
+
+<li class={base({ class: clsx(theme?.base, className) })}>
+  <button {...restProps} onclick={handleDropdown} type="button" class={btn({ class: clsx(theme?.btn, styling.btn) })} aria-controls="sidebar-dropdown">
+    {#if icon}
+      {@render icon()}
+    {/if}
+    <span class={span({ class: clsx(theme?.span, styling.span) })}>{label}</span>
+    {#if openState}
+      {#if arrowup}
+        {@render arrowup()}
+      {:else}
+        <svg class={svg({ class: clsx(theme?.svg, styling.svg) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
+        </svg>
+      {/if}
+    {:else if arrowdown}
+      {@render arrowdown()}
+    {:else}
+      <svg class={svg({ class: clsx(theme?.svg, styling.svg) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
+      </svg>
+    {/if}
+  </button>
+  {#if openState}
+    <ul class={ul({ class: clsx(theme?.ul, styling.ul) })} transition:transition={params as ParamsType}>
+      {@render children()}
+    </ul>
+  {/if}
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[SidebarDropdownWrapperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1501)
+## Props
+@prop children
+@prop arrowup
+@prop arrowdown
+@prop icon
+@prop isOpen = $bindable()
+@prop btnClass
+@prop label
+@prop spanClass
+@prop ulClass
+@prop transition = slide
+@prop params
+@prop svgClass
+@prop class: className
+@prop classes
+@prop onclick
+@prop ...restProps
+-->

package/dist/sidebar/SidebarDropdownWrapper.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { SidebarDropdownWrapperProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [SidebarDropdownWrapperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1501)
+ * ## Props
+ * @prop children
+ * @prop arrowup
+ * @prop arrowdown
+ * @prop icon
+ * @prop isOpen = $bindable()
+ * @prop btnClass
+ * @prop label
+ * @prop spanClass
+ * @prop ulClass
+ * @prop transition = slide
+ * @prop params
+ * @prop svgClass
+ * @prop class: className
+ * @prop classes
+ * @prop onclick
+ * @prop ...restProps
+ */
+declare const SidebarDropdownWrapper: import("svelte").Component<SidebarDropdownWrapperProps, {}, "isOpen">;
+type SidebarDropdownWrapper = ReturnType<typeof SidebarDropdownWrapper>;
+export default SidebarDropdownWrapper;

package/dist/sidebar/SidebarGroup.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import type { SidebarGroupProps } from "../types";
+
+  let { children, class: className = "space-y-2", borderClass = "pt-4 mt-4 border-t border-gray-200 dark:border-gray-700", border = false, ...restProps }: SidebarGroupProps = $props();
+</script>
+
+<ul {...restProps} class={border ? clsx(borderClass) : clsx(className)}>
+  {@render children()}
+</ul>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1518)
+## Props
+@prop children
+@prop class: className = "space-y-2"
+@prop borderClass = "pt-4 mt-4 border-t border-gray-200 dark:border-gray-700"
+@prop border = false
+@prop ...restProps
+-->

package/dist/sidebar/SidebarGroup.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { SidebarGroupProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1518)
+ * ## Props
+ * @prop children
+ * @prop class: className = "space-y-2"
+ * @prop borderClass = "pt-4 mt-4 border-t border-gray-200 dark:border-gray-700"
+ * @prop border = false
+ * @prop ...restProps
+ */
+declare const SidebarGroup: import("svelte").Component<SidebarGroupProps, {}, "">;
+type SidebarGroup = ReturnType<typeof SidebarGroup>;
+export default SidebarGroup;

package/dist/sidebar/SidebarItem.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { getSidebarContext, getActiveUrlContext } from "../context";
+  import clsx from "clsx";
+  import type { SidebarItemProps } from "../types";
+
+  let { icon, subtext, href, label, spanClass = "ms-3", activeClass, nonActiveClass, aClass, active, class: className, ...restProps }: SidebarItemProps = $props();
+
+  const context = getSidebarContext() ?? { closeSidebar: undefined, activeClass: undefined, nonActiveClass: undefined };
+
+  const activeUrl = getActiveUrlContext();
+
+  let activeItem = $derived(active !== undefined ? active : activeUrl?.value ? href === activeUrl.value : false);
+
+  let aCls = $derived(activeItem ? (activeClass ?? context.activeClass) : (nonActiveClass ?? context.nonActiveClass));
+</script>
+
+<li class={clsx(className)}>
+  <a onclick={context.closeSidebar ?? undefined} {...restProps} {href} aria-current={activeItem ? "page" : undefined} class={clsx(aCls, aClass)}>
+    {#if icon}
+      {@render icon()}
+    {/if}
+    <span class={clsx(spanClass)}>{label}</span>
+    {#if subtext}
+      {@render subtext()}
+    {/if}
+  </a>
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1524)
+## Props
+@prop icon
+@prop subtext
+@prop href
+@prop label
+@prop spanClass = "ms-3"
+@prop activeClass
+@prop nonActiveClass
+@prop aClass
+@prop active
+@prop class: className
+@prop ...restProps
+-->

package/dist/sidebar/SidebarItem.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { SidebarItemProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1524)
+ * ## Props
+ * @prop icon
+ * @prop subtext
+ * @prop href
+ * @prop label
+ * @prop spanClass = "ms-3"
+ * @prop activeClass
+ * @prop nonActiveClass
+ * @prop aClass
+ * @prop active
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const SidebarItem: import("svelte").Component<SidebarItemProps, {}, "">;
+type SidebarItem = ReturnType<typeof SidebarItem>;
+export default SidebarItem;

package/dist/sidebar/SidebarWrapper.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  let { children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div {...restProps}>
+  {@render children?.()}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: children: any;
+-->

package/dist/sidebar/SidebarWrapper.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from "svelte/elements";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: children: any;
+ */
+declare const SidebarWrapper: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+type SidebarWrapper = ReturnType<typeof SidebarWrapper>;
+export default SidebarWrapper;

package/dist/sidebar/index.d.ts

@@ -0,0 +1,10 @@
+export { default as Sidebar } from "./Sidebar.svelte";
+export { default as SidebarWrapper } from "./SidebarWrapper.svelte";
+export { default as SidebarDropdownWrapper } from "./SidebarDropdownWrapper.svelte";
+export { default as SidebarGroup } from "./SidebarGroup.svelte";
+export { default as SidebarItem } from "./SidebarItem.svelte";
+export { default as SidebarDropdownItem } from "./SidebarItem.svelte";
+export { default as SidebarButton } from "./SidebarButton.svelte";
+export { default as SidebarCta } from "./SidebarCta.svelte";
+export { default as SidebarBrand } from "./SidebarBrand.svelte";
+export { sidebar, sidebarButton, sidebarCta, sidebarBrand, sidebarDropdownWrapper } from "./theme";

package/dist/sidebar/index.js

@@ -0,0 +1,10 @@
+export { default as Sidebar } from "./Sidebar.svelte";
+export { default as SidebarWrapper } from "./SidebarWrapper.svelte";
+export { default as SidebarDropdownWrapper } from "./SidebarDropdownWrapper.svelte";
+export { default as SidebarGroup } from "./SidebarGroup.svelte";
+export { default as SidebarItem } from "./SidebarItem.svelte";
+export { default as SidebarDropdownItem } from "./SidebarItem.svelte";
+export { default as SidebarButton } from "./SidebarButton.svelte";
+export { default as SidebarCta } from "./SidebarCta.svelte";
+export { default as SidebarBrand } from "./SidebarBrand.svelte";
+export { sidebar, sidebarButton, sidebarCta, sidebarBrand, sidebarDropdownWrapper } from "./theme";