flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/dropdown/Dropdown.svelte.d.ts

@@ -1,87 +1,25 @@
 import { SvelteComponentTyped } from "svelte";
-export type DropdownType = {
-    activeClass: string;
-};
-import type { Placement } from '@floating-ui/dom';
-import type { FrameColor } from '../utils/Frame.svelte';
 declare const __propDef: {
-    props: import("svelte/elements").HTMLAttributes<HTMLElement> & {
-        tag?: string;
-        color?: FrameColor;
-        rounded?: boolean;
-        border?: boolean;
-        shadow?: boolean;
-        node?: HTMLElement | undefined;
-        use?: import("svelte/action").Action<HTMLElement, any>;
-        options?: object;
-        class?: string;
-        role?: string;
-        open?: boolean;
-        transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
-        params?: any;
-    } & {
-        activeContent?: boolean;
-        arrow?: boolean;
-        offset?: number;
-        placement?: Placement;
-        trigger?: "hover" | "click" | "focus";
-        triggeredBy?: string;
-        reference?: string;
-        strategy?: "absolute" | "fixed";
-        open?: boolean;
-        yOnly?: boolean;
-    } & {
-        activeUrl?: string;
-        open?: boolean;
-        containerClass?: string;
-        classContainer?: string;
-        headerClass?: string;
-        classHeader?: string;
-        footerClass?: string;
-        classFooter?: string;
-        activeClass?: string;
-        classActive?: string;
-        arrow?: boolean;
-        trigger?: "hover" | "click" | "focus";
-        placement?: Placement;
-        color?: FrameColor;
-        shadow?: boolean;
-        rounded?: boolean;
-    };
+    props: Record<string, never>;
     events: {
-        show: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        header: {};
-        default: {};
-        footer: {};
-    };
+    slots: {};
 };
-export type DropdownProps = typeof __propDef.props;
+type DropdownProps_ = typeof __propDef.props;
+export { DropdownProps_ as DropdownProps };
 export type DropdownEvents = typeof __propDef.events;
 export type DropdownSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let activeUrl: $$Props['activeUrl'] = undefined;
- * @prop export let open: $$Props['open'] = false;
- * @prop export let containerClass: $$Props['containerClass'] = 'divide-y z-50';
- * @prop export let classContainer: $$Props['classContainer'] = undefined;
- * @prop export let headerClass: $$Props['headerClass'] = 'py-1 overflow-hidden rounded-t-lg';
- * @prop export let classHeader: $$Props['classHeader'] = undefined;
- * @prop export let footerClass: $$Props['footerClass'] = 'py-1 overflow-hidden rounded-b-lg';
- * @prop export let classFooter: $$Props['classFooter'] = undefined;
- * @prop export let activeClass: $$Props['activeClass'] = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
- * @prop export let classActive: $$Props['classActive'] = undefined;
- * @prop export let arrow: $$Props['arrow'] = false;
- * @prop export let trigger: $$Props['trigger'] = 'click';
- * @prop export let placement: $$Props['placement'] = 'bottom';
- * @prop export let color: $$Props['color'] = 'dropdown';
- * @prop export let shadow: $$Props['shadow'] = true;
- * @prop export let rounded: $$Props['rounded'] = true;
+ * @props: children: any;
+ * @props:simple: any = false;
+ * @props:placement: any = "bottom";
+ * @props:offset: any = 2;
+ * @props:class: string;
+ * @props:backdropClass: any;
+ * @props:activeUrl: any = "";
  */
-export default class Dropdown extends SvelteComponentTyped<DropdownProps, DropdownEvents, DropdownSlots> {
+export default class Dropdown extends SvelteComponentTyped<DropdownProps_, DropdownEvents, DropdownSlots> {
 }
-export {};

package/dist/dropdown/DropdownDivider.svelte

@@ -1,12 +1,16 @@
-<script>import { twMerge } from "tailwind-merge";
-export let divClass = "my-1 h-px bg-gray-100 dark:bg-gray-600";
+<script lang="ts">
+  import clsx from "clsx";
+  import { type DropdownDividerProps as Props, dropdownDivider } from "./";
+
+  let { class: divClass, ...restProps }: Props = $props();
+  const base = dropdownDivider({ class: clsx(divClass) });
 </script>
 
-<div {...$$restProps} class={twMerge(divClass, $$props.class)}></div>
+<div {...restProps} class={base}></div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: $$Props['divClass'] = 'my-1 h-px bg-gray-100 dark:bg-gray-600';
+@props: class: string;
 -->

package/dist/dropdown/DropdownDivider.svelte.d.ts

@@ -1,22 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLDivElement> & {
-        divClass?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type DropdownDividerProps = typeof __propDef.props;
+type DropdownDividerProps_ = typeof __propDef.props;
+export { DropdownDividerProps_ as DropdownDividerProps };
 export type DropdownDividerEvents = typeof __propDef.events;
 export type DropdownDividerSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: $$Props['divClass'] = 'my-1 h-px bg-gray-100 dark:bg-gray-600';
+ * @props: class: string;
  */
-export default class DropdownDivider extends SvelteComponentTyped<DropdownDividerProps, DropdownDividerEvents, DropdownDividerSlots> {
+export default class DropdownDivider extends SvelteComponentTyped<DropdownDividerProps_, DropdownDividerEvents, DropdownDividerSlots> {
 }
-export {};

package/dist/dropdown/DropdownGroup.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { type DropdownGroupProps as Props, dropdownGroup } from ".";
+
+  let { children, class: className, ...restProps }: Props = $props();
+
+  const ulCls = $derived(dropdownGroup({ class: clsx(className) }));
+</script>
+
+<ul {...restProps} class={ulCls}>
+  {@render children()}
+</ul>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: children: any;
+@props:class: string;
+-->

package/dist/dropdown/DropdownGroup.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type DropdownGroupProps_ = typeof __propDef.props;
+export { DropdownGroupProps_ as DropdownGroupProps };
+export type DropdownGroupEvents = typeof __propDef.events;
+export type DropdownGroupSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:class: string;
+ */
+export default class DropdownGroup extends SvelteComponentTyped<DropdownGroupProps_, DropdownGroupEvents, DropdownGroupSlots> {
+}

package/dist/dropdown/DropdownHeader.svelte

@@ -1,20 +1,18 @@
-<script>import { twMerge } from "tailwind-merge";
-import DropdownDivider from "./DropdownDivider.svelte";
-export let divClass = "py-2 px-4 text-gray-700 dark:text-white";
-export let divider = true;
+<script lang="ts">
+  import { type DropdownHeaderProps as Props, dropdownHeader } from ".";
+
+  let { children, class: className, ...restProps }: Props = $props();
+  let headerClass = $derived(dropdownHeader({ class: className }));
 </script>
 
-<div {...$$restProps} class={twMerge(divClass, $$props.class)}>
-  <slot />
+<div {...restProps} class={headerClass}>
+  {@render children()}
 </div>
-{#if divider}
-  <DropdownDivider />
-{/if}
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: $$Props['divClass'] = 'py-2 px-4 text-gray-700 dark:text-white';
-@prop export let divider: $$Props['divider'] = true;
+@props: children: any;
+@props:class: string;
 -->

package/dist/dropdown/DropdownHeader.svelte.d.ts

@@ -1,26 +1,20 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLDivElement> & {
-        divClass?: string;
-        divider?: boolean;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type DropdownHeaderProps = typeof __propDef.props;
+type DropdownHeaderProps_ = typeof __propDef.props;
+export { DropdownHeaderProps_ as DropdownHeaderProps };
 export type DropdownHeaderEvents = typeof __propDef.events;
 export type DropdownHeaderSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: $$Props['divClass'] = 'py-2 px-4 text-gray-700 dark:text-white';
- * @prop export let divider: $$Props['divider'] = true;
+ * @props: children: any;
+ * @props:class: string;
  */
-export default class DropdownHeader extends SvelteComponentTyped<DropdownHeaderProps, DropdownHeaderEvents, DropdownHeaderSlots> {
+export default class DropdownHeader extends SvelteComponentTyped<DropdownHeaderProps_, DropdownHeaderEvents, DropdownHeaderSlots> {
 }
-export {};

package/dist/dropdown/DropdownItem.svelte

@@ -1,35 +1,47 @@
-<script>import Wrapper from "../utils/Wrapper.svelte";
-import { twMerge } from "tailwind-merge";
-import { getContext } from "svelte";
-export let defaultClass = "font-medium py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600";
-export let href = void 0;
-export let activeClass = void 0;
-const context = getContext("DropdownType") ?? {};
-const activeUrlStore = getContext("activeUrl");
-let sidebarUrl = "";
-activeUrlStore.subscribe((value) => {
-  sidebarUrl = value;
-});
-$: active = sidebarUrl ? href === sidebarUrl : false;
-$: liClass = twMerge(defaultClass, href ? "block" : "w-full text-left", active && (activeClass ?? context.activeClass), $$props.class);
-let wrap = true;
-function init(node) {
-  wrap = node.parentElement?.tagName === "UL";
-}
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { type DropdownItemProps as Props, dropdownItem } from ".";
+  import { tv } from "tailwind-variants";
+  import clsx from "clsx";
+
+  let { aClass, children, href, activeClass, liClass, class: className, ...restProps }: Props = $props();
+
+  const activeUrlStore = getContext("activeUrl") as { subscribe: (callback: (value: string) => void) => void };
+  let sidebarUrl = $state("");
+  activeUrlStore.subscribe((value) => {
+    // console.log('value: ', value)
+    sidebarUrl = value;
+  });
+
+  let active = $state(false);
+  $effect(() => {
+    active = sidebarUrl ? href === sidebarUrl : false;
+  });
+
+  const { anchor, activeAnchor } = dropdownItem();
+  let finalClass = $derived([active ? activeAnchor({ class: clsx(activeClass, className) }) : anchor({ class: clsx(aClass, className) })]);
 </script>
 
-<Wrapper tag="li" show={wrap} use={init}>
-  <svelte:element this={href ? 'a' : 'button'} {href} type={href ? undefined : 'button'} role={href ? 'link' : 'button'} {...$$restProps} class={liClass} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave>
-    <slot />
-  </svelte:element>
-</Wrapper>
+<li class={liClass}>
+  {#if href}
+    <a {href} {...restProps} class={finalClass}>
+      {@render children()}
+    </a>
+  {:else}
+    <div class={finalClass}>
+      {@render children()}
+    </div>
+  {/if}
+</li>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let defaultClass: $$Props['defaultClass'] = 'font-medium py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600';
-@prop export let href: $$Props['href'] = undefined;
-@prop export let activeClass: $$Props['activeClass'] = undefined;
-@prop export let active: boolean = false;
+@props: aClass: any;
+@props:children: any;
+@props:href: any;
+@props:activeClass: any;
+@props:liClass: any;
+@props:class: string;
 -->

package/dist/dropdown/DropdownItem.svelte.d.ts

@@ -1,26 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
-        defaultClass?: string;
-        href?: string;
-        activeClass?: string;
-    } & (HTMLAnchorAttributes | HTMLButtonAttributes);
+    props: Record<string, never>;
     events: {
-        click: MouseEvent;
-        change: Event;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 type DropdownItemProps_ = typeof __propDef.props;
 export { DropdownItemProps_ as DropdownItemProps };
@@ -29,10 +13,12 @@ export type DropdownItemSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let defaultClass: $$Props['defaultClass'] = 'font-medium py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600';
- * @prop export let href: $$Props['href'] = undefined;
- * @prop export let activeClass: $$Props['activeClass'] = undefined;
- * @prop export let active: boolean = false;
+ * @props: aClass: any;
+ * @props:children: any;
+ * @props:href: any;
+ * @props:activeClass: any;
+ * @props:liClass: any;
+ * @props:class: string;
  */
 export default class DropdownItem extends SvelteComponentTyped<DropdownItemProps_, DropdownItemEvents, DropdownItemSlots> {
 }

package/dist/dropdown/index.d.ts

@@ -0,0 +1,8 @@
+import Dropdown from "./Dropdown.svelte";
+import DropdownDivider from "./DropdownDivider.svelte";
+import DropdownGroup from "./DropdownGroup.svelte";
+import DropdownHeader from "./DropdownHeader.svelte";
+import DropdownItem from "./DropdownItem.svelte";
+import { dropdown, dropdownDivider, dropdownGroup, dropdownHeader, dropdownItem } from "./theme";
+import type { DropdownDividerProps, DropdownFooterProps, DropdownGroupProps, DropdownHeaderProps, DropdownItemProps, DropdownProps } from "./type";
+export { Dropdown, dropdown, DropdownDivider, dropdownDivider, DropdownGroup, dropdownGroup, DropdownHeader, dropdownHeader, DropdownItem, dropdownItem, type DropdownDividerProps, type DropdownFooterProps, type DropdownGroupProps, type DropdownHeaderProps, type DropdownItemProps, type DropdownProps };

package/dist/dropdown/index.js

@@ -0,0 +1,7 @@
+import Dropdown from "./Dropdown.svelte";
+import DropdownDivider from "./DropdownDivider.svelte";
+import DropdownGroup from "./DropdownGroup.svelte";
+import DropdownHeader from "./DropdownHeader.svelte";
+import DropdownItem from "./DropdownItem.svelte";
+import { dropdown, dropdownDivider, dropdownGroup, dropdownHeader, dropdownItem } from "./theme";
+export { Dropdown, dropdown, DropdownDivider, dropdownDivider, DropdownGroup, dropdownGroup, DropdownHeader, dropdownHeader, DropdownItem, dropdownItem };

package/dist/dropdown/theme.d.ts

@@ -0,0 +1,65 @@
+export declare const dropdown: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            backdrop?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            backdrop?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    backdrop: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            backdrop?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    backdrop: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    backdrop: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const dropdownDivider: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "my-1 h-px bg-gray-100 dark:bg-gray-500", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "my-1 h-px bg-gray-100 dark:bg-gray-500", unknown, unknown, undefined>>;
+export declare const dropdownHeader: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-4 py-3 text-sm text-gray-900 dark:text-white", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-4 py-3 text-sm text-gray-900 dark:text-white", unknown, unknown, undefined>>;
+export declare const dropdownItem: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            anchor?: import("tailwind-merge").ClassNameValue;
+            activeAnchor?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            anchor?: import("tailwind-merge").ClassNameValue;
+            activeAnchor?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    anchor: string;
+    activeAnchor: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            anchor?: import("tailwind-merge").ClassNameValue;
+            activeAnchor?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    anchor: string;
+    activeAnchor: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    anchor: string;
+    activeAnchor: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const dropdownGroup: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "py-2 text-sm text-gray-700 dark:text-gray-200", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "py-2 text-sm text-gray-700 dark:text-gray-200", unknown, unknown, undefined>>;

package/dist/dropdown/theme.js

@@ -0,0 +1,22 @@
+import { tv } from "tailwind-variants";
+export const dropdown = tv({
+    slots: {
+        base: "z-10 w-44 mt-2 divide-y divide-gray-300 dark:divide-gray-500 overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-700",
+        backdrop: "fixed top-0 start-0 w-full h-full"
+    }
+});
+export const dropdownDivider = tv({
+    base: "my-1 h-px bg-gray-100 dark:bg-gray-500"
+});
+export const dropdownHeader = tv({
+    base: "px-4 py-3 text-sm text-gray-900 dark:text-white"
+});
+export const dropdownItem = tv({
+    slots: {
+        anchor: "block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white",
+        activeAnchor: "block px-4 py-2 text-primary-700 dark:text-primary-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+    }
+});
+export const dropdownGroup = tv({
+    base: "py-2 text-sm text-gray-700 dark:text-gray-200"
+});

package/dist/dropdown/type.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLAnchorAttributes } from "svelte/elements";
+import type { PopperProps } from "../utils/Popper.svelte";
+interface DropdownProps extends PopperProps {
+    simple?: boolean;
+    divClass?: string;
+    footerClass?: string;
+    headerClass?: string;
+    ulClass?: string;
+    backdropClass?: string;
+    activeUrl?: string;
+}
+interface DropdownDividerProps extends HTMLAttributes<HTMLDivElement> {
+}
+interface DropdownHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+}
+interface DropdownItemProps extends HTMLAnchorAttributes {
+    children: Snippet;
+    aClass?: string;
+    href?: string;
+    activeClass?: string;
+    liClass?: string;
+}
+interface DropdownGroupProps extends HTMLAttributes<HTMLUListElement> {
+    children: Snippet;
+}
+export { type DropdownProps, type DropdownDividerProps, type DropdownItemProps, type DropdownGroupProps, type DropdownHeaderProps };

package/dist/dropdown/type.js

@@ -0,0 +1 @@
+export {};

package/dist/footer/Footer.svelte

@@ -1,15 +1,20 @@
-<script>import { twMerge } from "tailwind-merge";
-export let footerType = void 0;
-let footerClass = twMerge(footerType === "sitemap" && "bg-gray-800", footerType === "socialmedia" && "p-4 bg-white sm:p-6 dark:bg-gray-800", footerType === "logo" && "p-4 bg-white rounded-lg shadow-sm md:px-6 md:py-8 dark:bg-gray-800", footerType === "default" && "p-4 bg-white rounded-lg shadow-sm md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800", $$props.class);
+<script lang="ts">
+  import { type FooterProps as Props, footer } from ".";
+
+  let { children, footerType = "default", class: className, ...restProps }: Props = $props();
+
+  const footerCls = $derived(footer({ footerType, className }));
 </script>
 
-<footer {...$$restProps} class={footerClass}>
-  <slot />
+<footer {...restProps} class={footerCls}>
+  {@render children()}
 </footer>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let footerType: $$Props['footerType'] = undefined;
+@props: children: any;
+@props:footerType: any = "default";
+@props:class: string;
 -->

package/dist/footer/Footer.svelte.d.ts

@@ -1,24 +1,21 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLElement> & {
-        footerType?: "sitemap" | "default" | "logo" | "socialmedia";
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type FooterProps = typeof __propDef.props;
+type FooterProps_ = typeof __propDef.props;
+export { FooterProps_ as FooterProps };
 export type FooterEvents = typeof __propDef.events;
 export type FooterSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let footerType: $$Props['footerType'] = undefined;
+ * @props: children: any;
+ * @props:footerType: any = "default";
+ * @props:class: string;
  */
-export default class Footer extends SvelteComponentTyped<FooterProps, FooterEvents, FooterSlots> {
+export default class Footer extends SvelteComponentTyped<FooterProps_, FooterEvents, FooterSlots> {
 }
-export {};

package/dist/footer/FooterBrand.svelte

@@ -1,43 +1,37 @@
-<script>import { twMerge } from "tailwind-merge";
-export let aClass = "flex items-center";
-export let spanClass = "self-center text-2xl font-semibold whitespace-nowrap dark:text-white";
-export let imgClass = "me-3 h-8";
-export let href = "";
-export let src = "";
-export let alt = "";
-export let name = "";
-export let target = "";
-export let classA = "";
-export let classSpan = "";
-export let classImg = "";
-let aCls = twMerge(aClass, classA);
-let spanCls = twMerge(spanClass, classSpan);
-let imgCls = twMerge(imgClass, classImg);
+<script lang="ts">
+  import { type FooterBrandProps as Props, footerBrand } from ".";
+
+  let { children, aClass, spanClass, imgClass, href, src, alt, name, ...restProps }: Props = $props();
+
+  const { base, span, img } = $derived(footerBrand());
 </script>
 
 {#if href}
-  <a {...$$restProps} {href} {target} class={aCls}>
-    <img {src} class={imgCls} {alt} />
-    <span class={spanCls}>{name}</span>
-    <slot />
+  <a {...restProps} {href} class={base({ class: aClass })}>
+    {#if src}
+      <img {src} class={img({ class: imgClass })} {alt} />
+    {/if}
+    {#if name}
+      <span class={span({ class: spanClass })}>{name}</span>
+    {/if}
+    {#if children}
+      {@render children()}
+    {/if}
   </a>
 {:else}
-  <img {...$$restProps} {src} class={imgCls} {alt} />
+  <img {src} class={img({ class: imgClass })} {alt} />
 {/if}
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let aClass: $$Props['aClass'] = 'flex items-center';
-@prop export let spanClass: $$Props['spanClass'] = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
-@prop export let imgClass: $$Props['imgClass'] = 'me-3 h-8';
-@prop export let href: $$Props['href'] = '';
-@prop export let src: $$Props['src'] = '';
-@prop export let alt: $$Props['alt'] = '';
-@prop export let name: $$Props['name'] = '';
-@prop export let target: $$Props['target'] = '';
-@prop export let classA: $$Props['classA'] = '';
-@prop export let classSpan: $$Props['classSpan'] = '';
-@prop export let classImg: $$Props['classImg'] = '';
+@props: children: any;
+@props:aClass: any;
+@props:spanClass: any;
+@props:imgClass: any;
+@props:href: any;
+@props:src: any;
+@props:alt: any;
+@props:name: any;
 -->