flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/list-group/theme.d.ts

@@ -0,0 +1,135 @@
+export declare const listGroup: import("tailwind-variants").TVReturnType<{
+    rounded: {
+        true: string;
+        false: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+}, undefined, "bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-y divide-gray-200 dark:divide-gray-600", import("tailwind-variants/dist/config").TVConfig<{
+    rounded: {
+        true: string;
+        false: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+}, {
+    rounded: {
+        true: string;
+        false: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+}>, {
+    rounded: {
+        true: string;
+        false: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    rounded: {
+        true: string;
+        false: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+}, undefined, "bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-y divide-gray-200 dark:divide-gray-600", import("tailwind-variants/dist/config").TVConfig<{
+    rounded: {
+        true: string;
+        false: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+}, {
+    rounded: {
+        true: string;
+        false: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+export declare const listGroupItem: import("tailwind-variants").TVReturnType<{
+    state: {
+        normal: string;
+        current: string;
+        disabled: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+}, undefined, "py-2 px-4 w-full text-sm font-medium list-none", import("tailwind-variants/dist/config").TVConfig<{
+    state: {
+        normal: string;
+        current: string;
+        disabled: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+}, {
+    state: {
+        normal: string;
+        current: string;
+        disabled: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+}>, {
+    state: {
+        normal: string;
+        current: string;
+        disabled: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    state: {
+        normal: string;
+        current: string;
+        disabled: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+}, undefined, "py-2 px-4 w-full text-sm font-medium list-none", import("tailwind-variants/dist/config").TVConfig<{
+    state: {
+        normal: string;
+        current: string;
+        disabled: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+}, {
+    state: {
+        normal: string;
+        current: string;
+        disabled: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/list-group/theme.js

@@ -0,0 +1,50 @@
+import { tv } from "tailwind-variants";
+export const listGroup = tv({
+    base: "bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-y divide-gray-200 dark:divide-gray-600",
+    variants: {
+        rounded: {
+            true: "rounded-lg",
+            false: ""
+        },
+        border: {
+            true: "border border-gray-200 dark:border-gray-700",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            border: true,
+            class: "divide-gray-200 dark:divide-gray-700"
+        }
+    ],
+    defaultVariants: {
+        rounded: true,
+        border: true
+    }
+});
+export const listGroupItem = tv({
+    base: "py-2 px-4 w-full text-sm font-medium list-none",
+    variants: {
+        state: {
+            normal: "",
+            current: "",
+            disabled: ""
+        },
+        active: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            active: true,
+            state: "disabled",
+            class: "cursor-not-allowed"
+        },
+        {
+            active: true,
+            state: "normal",
+            class: "hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white"
+        }
+    ]
+});

package/dist/list-group/type.d.ts

@@ -0,0 +1,45 @@
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+import type { Component } from "svelte";
+interface ListGroupItemType {
+    name: string;
+    Icon?: Component;
+    onclick?: () => void;
+    href?: string;
+    active?: boolean;
+    current?: boolean;
+    disabled?: boolean;
+    [key: string]: any;
+}
+interface ListgroupProps {
+    children?: Snippet;
+    items?: (ListGroupItemType | string)[];
+    active?: boolean;
+    onclick?: (event?: MouseEvent) => void;
+    rounded?: boolean;
+    border?: boolean;
+    class?: string;
+    itemClass?: string;
+    aClasss?: string;
+    btnClass?: string;
+    iconClass?: string;
+}
+interface ListgroupItemProps extends HTMLAnchorAttributes {
+    children: Snippet;
+    onclick?: (event?: MouseEvent) => void;
+    active?: boolean;
+    current?: boolean;
+    disabled?: boolean;
+    name?: string;
+    Icon?: Component;
+    href?: string;
+    currentClass?: string;
+    normalClass?: string;
+    disabledClass?: string;
+    liClass?: string;
+    class?: string;
+    aClasss?: string;
+    btnClass?: string;
+    iconClass?: string;
+}
+export { type ListgroupProps, type ListgroupItemProps, type ListGroupItemType };

package/dist/list-group/type.js

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

package/dist/mega-menu/MegaMenu.svelte

@@ -1,36 +1,42 @@
-<script>import { twMerge } from "tailwind-merge";
-import Popper from "../utils/Popper.svelte";
-export let items = [];
-export let full = false;
-export let open = false;
-export let ulClass = "grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max";
-let wrapperClass;
-$: wrapperClass = twMerge(full && "border-y w-full !ml-0", $$props.class);
-let ulCls;
-$: ulCls = twMerge(ulClass, full && $$slots.extra ? "grid-cols-2" : "grid-cols-2 md:grid-cols-3", "text-sm font-medium", full && $$slots.extra && "md:w-2/3", $$props.classUl);
+<script lang="ts">
+  import { type MegaMenuProps as Props, megamenu } from ".";
+
+  let { children, footer, items = [], full, dropdownStatus = $bindable(), class: className, ...restProps }: Props = $props();
+
+  const { base, div, ul, footerDiv } = $derived(megamenu());
+  $inspect("dropdownStatus", dropdownStatus);
 </script>
 
-<Popper color={full ? 'default' : 'dropdown'} border={!full} rounded={!full} activeContent arrow={false} trigger="click" placement="bottom" yOnly={full} {...$$restProps} class={wrapperClass} on:show bind:open>
-  <div class="flex flex-col md:flex-row p-4 max-w-screen-md justify-center mx-auto mt-2">
-    <ul class={ulCls}>
-      {#each items as item, index}
-        <li>
-          <slot {item} {index} />
-        </li>
-      {:else}
-        <slot item={items[0]} index={0} />
-      {/each}
-    </ul>
-    {#if full && $$slots.extra}<div class="md:w-1/3 mt-4 md:mt-0"><slot name="extra" /></div>{/if}
+<!-- Dropdown menu -->
+{#if dropdownStatus}
+  <div {...restProps} class={base({ className })}>
+    <div class={div()}>
+      <ul class={ul()}>
+        {#each items as item, index}
+          <li>
+            {@render children({ item, index })}
+          </li>
+        {:else}
+          {@render children({ item: items[0], index: 0 })}
+        {/each}
+      </ul>
+      {#if full && footer}
+        <div class={footerDiv()}>
+          {@render footer()}
+        </div>
+      {/if}
+    </div>
   </div>
-</Popper>
+{/if}
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let items: $$Props['items'] = [];
-@prop export let full: $$Props['full'] = false;
-@prop export let open: $$Props['open'] = false;
-@prop export let ulClass: $$Props['ulClass'] = 'grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max';
+@props: children: any;
+@props:footer: any;
+@props:items: any = [];
+@props:full: any;
+@props:dropdownStatus: any = $bindable();
+@props:class: string;
 -->

package/dist/mega-menu/MegaMenu.svelte.d.ts

@@ -1,65 +1,14 @@
-import { SvelteComponentTyped } from "svelte";
-import type { LinkType } from '../types';
-declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
-        tag?: string;
-        color?: import("../utils/Frame.svelte").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?: import("@floating-ui/dom").Placement;
-        trigger?: "hover" | "click" | "focus";
-        triggeredBy?: string;
-        reference?: string;
-        strategy?: "absolute" | "fixed";
-        open?: boolean;
-        yOnly?: boolean;
-    } & {
-        items: (LinkType & {
-            [propName: string]: any;
-        })[];
-        full?: boolean;
-        open?: boolean;
-        ulClass?: string;
-    };
-    events: {
-        show: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            item: LinkType & {
-                [propName: string]: any;
-            };
-            index: number;
-        };
-        extra: {};
-    };
-};
-export type MegaMenuProps = typeof __propDef.props;
-export type MegaMenuEvents = typeof __propDef.events;
-export type MegaMenuSlots = typeof __propDef.slots;
+import { type MegaMenuProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let items: $$Props['items'] = [];
- * @prop export let full: $$Props['full'] = false;
- * @prop export let open: $$Props['open'] = false;
- * @prop export let ulClass: $$Props['ulClass'] = 'grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max';
+ * @props: children: any;
+ * @props:footer: any;
+ * @props:items: any = [];
+ * @props:full: any;
+ * @props:dropdownStatus: any = $bindable();
+ * @props:class: string;
  */
-export default class MegaMenu extends SvelteComponentTyped<MegaMenuProps, MegaMenuEvents, MegaMenuSlots> {
-}
-export {};
+declare const MegaMenu: import("svelte").Component<Props, {}, "dropdownStatus">;
+type MegaMenu = ReturnType<typeof MegaMenu>;
+export default MegaMenu;

package/dist/mega-menu/index.d.ts

@@ -0,0 +1,4 @@
+import type { MegaMenuProps } from "./type";
+import MegaMenu from "./MegaMenu.svelte";
+import { megamenu } from "./theme";
+export { MegaMenu, type MegaMenuProps, megamenu };

package/dist/mega-menu/index.js

@@ -0,0 +1,3 @@
+import MegaMenu from "./MegaMenu.svelte";
+import { megamenu } from "./theme";
+export { MegaMenu, megamenu };

package/dist/mega-menu/theme.d.ts

@@ -0,0 +1,30 @@
+export declare const megamenu: import("tailwind-variants").TVReturnType<{
+    full: {};
+}, {
+    base: string;
+    div: string;
+    ul: string;
+    footerDiv: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    full: {};
+}, {
+    full: {};
+}>, {
+    full: {};
+}, {
+    base: string;
+    div: string;
+    ul: string;
+    footerDiv: string;
+}, import("tailwind-variants").TVReturnType<{
+    full: {};
+}, {
+    base: string;
+    div: string;
+    ul: string;
+    footerDiv: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    full: {};
+}, {
+    full: {};
+}>, unknown, unknown, undefined>>;

package/dist/mega-menu/theme.js

@@ -0,0 +1,12 @@
+import { tv } from "tailwind-variants";
+export const megamenu = tv({
+    slots: {
+        base: "w-full border rounded-lg",
+        div: "flex flex-col md:flex-row p-4 max-w-screen-md justify-center mx-auto mt-2",
+        ul: "grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max grid-cols-2 md:grid-cols-3 text-sm font-medium",
+        footerDiv: "md:w-1/3 mt-4 md:mt-0"
+    },
+    variants: {
+        full: {}
+    }
+});

package/dist/mega-menu/type.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+import type { LinkType } from "../types";
+import type { HTMLAttributes } from "svelte/elements";
+interface MegaMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    children: Snippet<[{
+        item: LinkType;
+        index: number;
+    }]>;
+    footer?: Snippet;
+    items?: LinkType[];
+    full?: boolean;
+    ulClass?: string;
+    dropdownStatus: boolean;
+    divClass?: string;
+    footerClass?: string;
+    headerClass?: string;
+}
+export { type MegaMenuProps };

package/dist/mega-menu/type.js

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