flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/drawer/Drawer.svelte

@@ -1,80 +1,50 @@
-<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 bgColor = "bg-gray-900";
-export let bgOpacity = "bg-opacity-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":
-      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);
-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 ".";
+
+  let { children, drawerStatus, 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>
 
-{#if !hidden}
+{#if drawerStatus}
   {#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="fixed 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({ className })} transition:transition={params as ParamsType} tabindex="-1">
+    {@render children()}
   </div>
 {/if}
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.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-opacity-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:drawerStatus: any;
+@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,57 +1,22 @@
-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;
-        bgColor?: string;
-        bgOpacity?: string;
-        placement?: "left" | "right" | "top" | "bottom";
-        id?: string;
-        divClass?: string;
-        transitionParams?: drawerTransitionParamTypes;
-        transitionType?: TransitionTypes;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            hidden: boolean | undefined;
-        };
-    };
-};
-export type DrawerProps = typeof __propDef.props;
-export type DrawerEvents = typeof __propDef.events;
-export type DrawerSlots = typeof __propDef.slots;
+import { type DrawerProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.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-opacity-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:drawerStatus: any;
+ * @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 {};
+declare const Drawer: import("svelte").Component<Props, {}, "">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/drawer/Drawerhead.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  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({ 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://preview.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,13 @@
+import { type DrawerheadProps as Props } from ".";
+/**
+ * [Go to docs](https://preview.flowbite-svelte.com/)
+ * ## Props
+ * @props: closeIcon: any;
+ * @props:children: any;
+ * @props:buttonClass: any;
+ * @props:svgClass: any;
+ * @props:class: string;
+ */
+declare const Drawerhead: import("svelte").Component<Props, {}, "">;
+type Drawerhead = ReturnType<typeof Drawerhead>;
+export default Drawerhead;

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,336 @@
+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, import("tailwind-variants/dist/config").TVConfig<{
+    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;
+        };
+    };
+}, {
+    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;
+        };
+    };
+}>, {
+    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, import("tailwind-variants/dist/config").TVConfig<{
+    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;
+        };
+    };
+}, {
+    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;
+        };
+    };
+}>, 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, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            button?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [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, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            button?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, 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",
+        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-3 w-3"
+    }
+});

package/dist/drawer/type.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type { TransitionFunc, ParamsType } from "../types";
+type WidthType = "default" | "full" | "half" | undefined;
+type PlacementType = "left" | "right" | "top" | "bottom" | undefined;
+type PosisionType = "fixed" | "absolute" | undefined;
+interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    drawerStatus: boolean;
+    closeDrawer?: () => void;
+    activateClickOutside?: boolean;
+    position?: PosisionType;
+    width?: WidthType;
+    backdrop?: boolean;
+    backdropClass?: string;
+    placement?: PlacementType;
+    class?: string;
+    params?: ParamsType;
+    transition?: TransitionFunc;
+}
+interface DrawerheadProps extends HTMLButtonAttributes {
+    closeIcon?: Snippet;
+    children?: Snippet;
+    buttonClass?: string;
+    svgClass?: string;
+}
+export { type DrawerProps, type DrawerheadProps };

package/dist/drawer/type.js

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