flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/drawer/Drawer.svelte

@@ -1,60 +1,34 @@
-<script>import { twMerge } from "tailwind-merge";
-import { fly, slide, blur, fade } from "svelte/transition";
-import { clickOutside } from "../utils/clickOutside";
-export let activateClickOutside = true;
-export let hidden = true;
-export let position = "fixed";
-export let leftOffset = "inset-y-0 start-0";
-export let rightOffset = "inset-y-0 end-0";
-export let topOffset = "inset-x-0 top-0";
-export let bottomOffset = "inset-x-0 bottom-0";
-export let width = "w-80";
-export let backdrop = true;
-export let backdropClass = "";
-export let bgColor = "bg-gray-900";
-export let bgOpacity = "bg-black/75";
-export let placement = "left";
-export let id = "drawer-example";
-export let divClass = "overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800";
-export let transitionParams = {};
-export let transitionType = "fly";
-function multiple(node, params) {
-  switch (transitionType) {
-    case "slide":
-      return slide(node, params);
-    case "blur-sm":
-      return blur(node, params);
-    case "fade":
-      return fade(node, params);
-    default:
-      return fly(node, params);
-  }
-}
-const placements = {
-  left: leftOffset,
-  right: rightOffset,
-  top: topOffset,
-  bottom: bottomOffset
-};
-const handleDrawer = () => {
-  hidden = !hidden;
-};
-const handleClickOutside = () => activateClickOutside && !hidden && handleDrawer();
-let backdropDivClass = twMerge("fixed top-0 start-0 z-50 w-full h-full", backdrop && bgColor, backdrop && bgOpacity, backdropClass);
-function clickOutsideWrapper(node, callback) {
-  return activateClickOutside ? clickOutside(node, callback) : void 0;
-}
+<script lang="ts">
+  import type { ParamsType } from "../types";
+  import { fly } from "svelte/transition";
+  import { sineIn } from "svelte/easing";
+  import { type DrawerProps as Props, drawer } from ".";
+  import clsx from "clsx";
+
+  let { children, hidden = $bindable(), closeDrawer, activateClickOutside = true, position, width, backdrop = true, backdropClass, placement = "left", class: className, params = { x: -320, duration: 200, easing: sineIn }, transition = fly, ...restProps }: Props = $props();
+
+  const { base, backdrop: backdropCls } = $derived(
+    drawer({
+      position,
+      placement,
+      width,
+      backdrop
+    })
+  );
 </script>
 
+<svelte:window onkeydown={hidden ? undefined : (ev: KeyboardEvent) => ev.key === "Escape" && (hidden = true)} />
+
 {#if !hidden}
   {#if backdrop && activateClickOutside}
-    <div role="presentation" class={backdropDivClass} on:click={() => !hidden && handleDrawer()}></div>
+    <div role="presentation" class={backdropCls({ class: backdropClass })} onclick={closeDrawer}></div>
   {:else if backdrop && !activateClickOutside}
-    <div role="presentation" class={backdropDivClass}></div>
+    <div role="presentation" class={backdropCls({ class: backdropClass })}></div>
+  {:else if !backdrop && activateClickOutside}
+    <div role="presentation" class="start-0 top-0 z-50 h-full w-full" onclick={closeDrawer}></div>
   {/if}
-
-  <div use:clickOutsideWrapper={handleClickOutside} {id} {...$$restProps} class={twMerge(divClass, width, position, placements[placement], $$props.class)} transition:multiple={transitionParams} tabindex="-1" aria-controls={id} aria-labelledby={id}>
-    <slot {hidden}></slot>
+  <div {...restProps} class={base({ class: clsx(className) })} transition:transition={params as ParamsType} tabindex="-1">
+    {@render children?.()}
   </div>
 {/if}
 
@@ -62,20 +36,18 @@ function clickOutsideWrapper(node, callback) {
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let activateClickOutside: $$Props['activateClickOutside'] = true;
-@prop export let hidden: $$Props['hidden'] = true;
-@prop export let position: $$Props['position'] = 'fixed';
-@prop export let leftOffset: $$Props['leftOffset'] = 'inset-y-0 start-0';
-@prop export let rightOffset: $$Props['rightOffset'] = 'inset-y-0 end-0';
-@prop export let topOffset: $$Props['topOffset'] = 'inset-x-0 top-0';
-@prop export let bottomOffset: $$Props['bottomOffset'] = 'inset-x-0 bottom-0';
-@prop export let width: $$Props['width'] = 'w-80';
-@prop export let backdrop: $$Props['backdrop'] = true;
-@prop export let bgColor: $$Props['bgColor'] = 'bg-gray-900';
-@prop export let bgOpacity: $$Props['bgOpacity'] = 'bg-black/75';
-@prop export let placement: NonNullable<$$Props['placement']> = 'left';
-@prop export let id: $$Props['id'] = 'drawer-example';
-@prop export let divClass: $$Props['divClass'] = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';
-@prop export let transitionParams: $$Props['transitionParams'] = {};
-@prop export let transitionType: $$Props['transitionType'] = 'fly';
+@props: children: any;
+@props:hidden: any = $bindable();
+@props:closeDrawer: any;
+@props:activateClickOutside: any = true;
+@props:position: any;
+@props:width: any;
+@props:backdrop: any = true;
+@props:backdropClass: any;
+@props:placement: any = "left";
+@props:class: string;
+@props:params: any = { x: -320;
+@props:duration: any;
+@props:easing: any;
+@props:transition: any = fly;
 -->

package/dist/drawer/Drawer.svelte.d.ts

@@ -1,58 +1,32 @@
 import { SvelteComponentTyped } from "svelte";
-import type { drawerTransitionParamTypes, TransitionTypes } from '../types';
-import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLElement> & {
-        activateClickOutside?: boolean;
-        hidden?: boolean;
-        position?: "fixed" | "absolute";
-        leftOffset?: string;
-        rightOffset?: string;
-        topOffset?: string;
-        bottomOffset?: string;
-        width?: string;
-        backdrop?: boolean;
-        backdropClass?: string;
-        bgColor?: string;
-        bgOpacity?: string;
-        placement?: "left" | "right" | "top" | "bottom";
-        id?: string;
-        divClass?: string;
-        transitionParams?: drawerTransitionParamTypes;
-        transitionType?: TransitionTypes;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {
-            hidden: boolean | undefined;
-        };
-    };
+    slots: {};
 };
-export type DrawerProps = typeof __propDef.props;
+type DrawerProps_ = typeof __propDef.props;
+export { DrawerProps_ as DrawerProps };
 export type DrawerEvents = typeof __propDef.events;
 export type DrawerSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let activateClickOutside: $$Props['activateClickOutside'] = true;
- * @prop export let hidden: $$Props['hidden'] = true;
- * @prop export let position: $$Props['position'] = 'fixed';
- * @prop export let leftOffset: $$Props['leftOffset'] = 'inset-y-0 start-0';
- * @prop export let rightOffset: $$Props['rightOffset'] = 'inset-y-0 end-0';
- * @prop export let topOffset: $$Props['topOffset'] = 'inset-x-0 top-0';
- * @prop export let bottomOffset: $$Props['bottomOffset'] = 'inset-x-0 bottom-0';
- * @prop export let width: $$Props['width'] = 'w-80';
- * @prop export let backdrop: $$Props['backdrop'] = true;
- * @prop export let bgColor: $$Props['bgColor'] = 'bg-gray-900';
- * @prop export let bgOpacity: $$Props['bgOpacity'] = 'bg-black/75';
- * @prop export let placement: NonNullable<$$Props['placement']> = 'left';
- * @prop export let id: $$Props['id'] = 'drawer-example';
- * @prop export let divClass: $$Props['divClass'] = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';
- * @prop export let transitionParams: $$Props['transitionParams'] = {};
- * @prop export let transitionType: $$Props['transitionType'] = 'fly';
+ * @props: children: any;
+ * @props:hidden: any = $bindable();
+ * @props:closeDrawer: any;
+ * @props:activateClickOutside: any = true;
+ * @props:position: any;
+ * @props:width: any;
+ * @props:backdrop: any = true;
+ * @props:backdropClass: any;
+ * @props:placement: any = "left";
+ * @props:class: string;
+ * @props:params: any = { x: -320;
+ * @props:duration: any;
+ * @props:easing: any;
+ * @props:transition: any = fly;
  */
-export default class Drawer extends SvelteComponentTyped<DrawerProps, DrawerEvents, DrawerSlots> {
+export default class Drawer extends SvelteComponentTyped<DrawerProps_, DrawerEvents, DrawerSlots> {
 }
-export {};

package/dist/drawer/Drawerhead.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { drawerhead, type DrawerheadProps as Props } from ".";
+
+  let { closeIcon, children, buttonClass, svgClass, class: className, ...restProps }: Props = $props();
+
+  const { base, button, svg } = $derived(drawerhead());
+</script>
+
+<div class={base({ class: clsx(className) })}>
+  {#if children}
+    {@render children()}
+  {/if}
+  {#if closeIcon}
+    {@render closeIcon()}
+  {:else}
+    <button type="button" {...restProps} class={button({ class: buttonClass })}>
+      <svg class={svg({ class: svgClass })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+      </svg>
+      <span class="sr-only">Close drawer</span>
+    </button>
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: closeIcon: any;
+@props:children: any;
+@props:buttonClass: any;
+@props:svgClass: any;
+@props:class: string;
+-->

package/dist/drawer/Drawerhead.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type DrawerheadProps_ = typeof __propDef.props;
+export { DrawerheadProps_ as DrawerheadProps };
+export type DrawerheadEvents = typeof __propDef.events;
+export type DrawerheadSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: closeIcon: any;
+ * @props:children: any;
+ * @props:buttonClass: any;
+ * @props:svgClass: any;
+ * @props:class: string;
+ */
+export default class Drawerhead extends SvelteComponentTyped<DrawerheadProps_, DrawerheadEvents, DrawerheadSlots> {
+}

package/dist/drawer/index.d.ts

@@ -0,0 +1,5 @@
+import type { DrawerProps, DrawerheadProps } from "./type";
+import Drawer from "./Drawer.svelte";
+import Drawerhead from "./Drawerhead.svelte";
+import { drawer, drawerhead } from "./theme";
+export { Drawer, drawer, Drawerhead, drawerhead, type DrawerProps, type DrawerheadProps };

package/dist/drawer/index.js

@@ -0,0 +1,4 @@
+import Drawer from "./Drawer.svelte";
+import Drawerhead from "./Drawerhead.svelte";
+import { drawer, drawerhead } from "./theme";
+export { Drawer, drawer, Drawerhead, drawerhead };

package/dist/drawer/theme.d.ts

@@ -0,0 +1,166 @@
+import { type VariantProps } from "tailwind-variants";
+export type DrawerVariants = VariantProps<typeof drawer>;
+export declare const drawer: import("tailwind-variants").TVReturnType<{
+    position: {
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+    };
+    placement: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+        top: {
+            base: string;
+        };
+        bottom: {
+            base: string;
+        };
+    };
+    width: {
+        default: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+        half: {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}, {
+    base: string;
+    backdrop: string;
+}, undefined, {
+    position: {
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+    };
+    placement: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+        top: {
+            base: string;
+        };
+        bottom: {
+            base: string;
+        };
+    };
+    width: {
+        default: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+        half: {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}, {
+    base: string;
+    backdrop: string;
+}, import("tailwind-variants").TVReturnType<{
+    position: {
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+    };
+    placement: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+        top: {
+            base: string;
+        };
+        bottom: {
+            base: string;
+        };
+    };
+    width: {
+        default: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+        half: {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}, {
+    base: string;
+    backdrop: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const drawerhead: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            button?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            button?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    button: string;
+    svg: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            button?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    button: string;
+    svg: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    button: string;
+    svg: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/drawer/theme.js

@@ -0,0 +1,39 @@
+import { tv } from "tailwind-variants";
+export const drawer = tv({
+    slots: {
+        base: "overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800",
+        backdrop: "fixed top-0 start-0 z-50 w-full h-full"
+    },
+    variants: {
+        position: {
+            fixed: { base: "fixed" },
+            absolute: { base: "absolute" }
+        },
+        placement: {
+            left: { base: "inset-y-0 start-0" },
+            right: { base: "inset-y-0 end-0" },
+            top: { base: "inset-x-0 top-0" },
+            bottom: { base: "inset-x-0 bottom-0" }
+        },
+        width: {
+            default: { base: "w-80" },
+            full: { base: "w-full" },
+            half: { base: "w-1/2" }
+        },
+        backdrop: {
+            true: { backdrop: "bg-gray-900 bg-opacity-75" }
+        }
+    },
+    defaultVariants: {
+        position: "fixed",
+        placement: "left",
+        width: "default"
+    }
+});
+export const drawerhead = tv({
+    slots: {
+        base: "flex items-center justify-between",
+        button: "ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white",
+        svg: "h-8 w-8"
+    }
+});

package/dist/drawer/type.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type { TransitionFunc, ParamsType } from "../types";
+import type { DrawerVariants } from "./theme";
+interface DrawerProps extends DrawerVariants, HTMLAttributes<HTMLDivElement> {
+    hidden: boolean;
+    closeDrawer?: () => void;
+    activateClickOutside?: boolean;
+    backdropClass?: string;
+    params?: ParamsType;
+    transition?: TransitionFunc;
+}
+interface DrawerheadProps extends HTMLButtonAttributes {
+    closeIcon?: Snippet;
+    buttonClass?: string;
+    svgClass?: string;
+}
+export { type DrawerProps, type DrawerheadProps };

package/dist/drawer/type.js

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

package/dist/dropdown/Dropdown.svelte

@@ -1,49 +1,31 @@
-<script context="module"></script>
+<script lang="ts">
+  import Popper from "../utils/Popper.svelte";
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+  import { type DropdownProps as Props, dropdown } from "./";
+  import DropdownGroup from "./DropdownGroup.svelte";
+  import clsx from "clsx";
 
-<script>import { twMerge } from "tailwind-merge";
-import Popper from "../utils/Popper.svelte";
-import { setContext } from "svelte";
-import { writable } from "svelte/store";
-export let activeUrl = void 0;
-export let open = false;
-export let containerClass = "divide-y z-50";
-export let classContainer = void 0;
-export let headerClass = "py-1 overflow-hidden rounded-t-lg";
-export let classHeader = void 0;
-export let footerClass = "py-1 overflow-hidden rounded-b-lg";
-export let classFooter = void 0;
-export let activeClass = "text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900";
-export let classActive = void 0;
-export let arrow = false;
-export let trigger = "click";
-export let placement = "bottom";
-export let color = "dropdown";
-export let shadow = true;
-export let rounded = true;
-const activeUrlStore = writable("");
-let activeCls = twMerge(activeClass, classActive);
-setContext("DropdownType", { activeClass: activeCls });
-$: activeUrlStore.set(activeUrl ?? "");
-setContext("activeUrl", activeUrlStore);
-$: containerCls = twMerge(containerClass, classContainer);
-$: headerCls = twMerge(headerClass, classHeader);
-$: ulCls = twMerge("py-1", $$props.class);
-$: footerCls = twMerge(footerClass, classFooter);
+  let { children, simple = false, placement = "bottom", offset = 2, class: className, backdropClass, activeUrl = "", ...restProps }: Props = $props();
+
+  const { base, backdrop } = $derived(dropdown());
+  const activeUrlStore = writable("");
+  setContext("activeUrl", activeUrlStore);
+
+  $effect(() => {
+    activeUrlStore.set(activeUrl ?? "");
+  });
 </script>
 
-<Popper activeContent {...$$restProps} {trigger} {arrow} {placement} {shadow} {rounded} {color} class={containerCls} on:show bind:open>
-  {#if $$slots.header}
-    <div class={headerCls}>
-      <slot name="header" />
-    </div>
-  {/if}
-  <ul class={ulCls}>
-    <slot />
-  </ul>
-  {#if $$slots.footer}
-    <div class={footerCls}>
-      <slot name="footer" />
-    </div>
+<!-- Dropdown menu -->
+
+<Popper {...restProps} {placement} {offset} class={base({ class: clsx(className) })}>
+  {#if simple}
+    <DropdownGroup>
+      {@render children()}
+    </DropdownGroup>
+  {:else}
+    {@render children()}
   {/if}
 </Popper>
 
@@ -51,20 +33,11 @@ $: footerCls = twMerge(footerClass, classFooter);
 @component
 [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 = "";
 -->