@pajohns/flowbite-svelte 0.1.0

package/dist/dialog/theme.d.ts

@@ -0,0 +1,16 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type DialogVariants = VariantProps<typeof dialog> & Classes<typeof dialog>;
+export declare const dialog: import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+    form: string;
+    close: string;
+}, undefined, {}, {
+    base: string;
+    form: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+    form: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/dialog/theme.js

@@ -0,0 +1,17 @@
+import { tv } from "tailwind-variants";
+export const dialog = tv({
+    slots: {
+        base: "backdrop:bg-gray-900/50 open:flex flex-col bg-white dark:bg-gray-800",
+        form: "flex flex-col w-full border-inherit dark:border-inherit divide-inherit dark:divide-inherit",
+        close: "absolute top-2.5 end-2.5"
+    },
+    variants: {
+    // position: {
+    //     fixed: { base: "fixed" },
+    //     absolute: { base: "absolute" }
+    // },
+    },
+    defaultVariants: {
+    // position: "fixed"
+    }
+});

package/dist/drawer/Drawer.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+  import type { DrawerProps } from "..";
+  import Dialog from "../dialog/Dialog.svelte";
+  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
+  import { sineIn } from "svelte/easing";
+  import { fly } from "svelte/transition";
+  import { drawer } from "./theme";
+  import { setDrawerContext } from "../context";
+  import { tick } from "svelte";
+
+  let {
+    children,
+    open = $bindable(false),
+    hidden = $bindable(),
+    modal,
+    offset,
+    width,
+    dismissable,
+    placement = "left",
+    class: className,
+    transitionParams,
+    transition = fly,
+    outsideclose,
+    activateClickOutside,
+    ...restProps
+  }: DrawerProps = $props();
+
+  // Set dismissable based on offset if not explicitly provided
+  const finalDismissable = $derived(dismissable ?? (offset ? false : undefined));
+
+  // Create reactive context using getter
+  const context = {
+    get placement() {
+      return placement;
+    }
+  };
+
+  setDrawerContext(context);
+
+  // back compatibility
+  if (hidden !== undefined) console.warn("'hidden' property is deprecated. Please use the 'open' property to manage 'Drawer'.");
+
+  $effect(() => {
+    if (activateClickOutside !== undefined) console.warn("'activateClickOutside' property is deprecated. Please use the 'outsideclose' property to manage 'Drawer' behaviour.");
+  });
+
+  $effect(() => {
+    if (activateClickOutside !== undefined && outsideclose === undefined) {
+      outsideclose = activateClickOutside;
+    }
+  });
+  $effect(() => {
+    if (hidden !== undefined) {
+      const nextOpen = !hidden;
+      if (open !== nextOpen) open = nextOpen;
+    }
+  });
+  $effect(() => {
+    if (hidden !== undefined) {
+      const nextHidden = !open;
+      if (hidden !== nextHidden) hidden = nextHidden;
+    }
+  });
+  // end
+
+  const theme = $derived(getTheme("drawer"));
+
+  let shifted = $state(true);
+
+  const { base } = $derived(drawer({ placement, width, modal: offset && !open ? false : modal, shifted }));
+
+  let x = $state(),
+    y = $state();
+
+  let transition_params = $derived({ x, y, duration: 300, easing: sineIn, opacity: 1, ...transitionParams });
+
+  function init(node: HTMLDialogElement) {
+    // set initial offset, later it will be switched on/off by onintrostart
+    if (offset) {
+      node.style[placement] = offset;
+      tick().then(() => {
+        // few browsers give focus when dialog is open even in non-modal version
+        // to prevent that we set dialog to inert during creation and remove it
+        // as soon as ready
+        node.inert = false;
+      });
+    }
+  }
+
+  async function onintrostart(ev: CustomEvent & { currentTarget: HTMLDialogElement }) {
+    restProps.onintrostart?.(ev);
+    if (ev.defaultPrevented) return;
+
+    // set the values for transition start position
+    const dlg = ev.currentTarget;
+    const { innerWidth = 0, innerHeight = 0 } = dlg.ownerDocument.defaultView ?? {};
+
+    const rect = dlg.getBoundingClientRect();
+
+    x = placement === "left" ? rect.left : placement === "right" ? rect.right - innerWidth : undefined;
+    y = placement === "top" ? rect.top : placement === "bottom" ? rect.bottom - innerHeight : undefined;
+
+    await tick(); // let transition start
+
+    // remove shift for transition end position
+    shifted = !open;
+
+    // add offset if closed, remove it when open
+    if (offset) dlg.style[placement] = open ? "" : offset;
+  }
+
+  function onoutrostart(ev: CustomEvent & { currentTarget: HTMLDialogElement }) {
+    restProps.onoutrostart?.(ev);
+    if (ev.defaultPrevented) return;
+
+    shifted = true;
+  }
+</script>
+
+<Dialog
+  {@attach init}
+  bind:open
+  {modal}
+  dismissable={finalDismissable}
+  {transition}
+  {outsideclose}
+  transitionParams={transition_params}
+  {...restProps}
+  {onintrostart}
+  {onoutrostart}
+  class={base({ class: clsx(theme?.base, className) })}
+>
+  {@render children?.()}
+</Dialog>
+
+{#if offset && !open}
+  <Dialog {@attach init} open modal={false} dismissable={finalDismissable} {outsideclose} inert {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+    {@render children?.()}
+  </Dialog>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L676)
+## Props
+@prop children
+@prop open = $bindable(false)
+@prop hidden = $bindable()
+@prop modal
+@prop offset
+@prop width
+@prop dismissable
+@prop placement = "left"
+@prop class: className
+@prop transitionParams
+@prop transition = fly
+@prop outsideclose
+@prop activateClickOutside
+@prop ...restProps
+-->

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

@@ -0,0 +1,24 @@
+import type { DrawerProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L676)
+ * ## Props
+ * @prop children
+ * @prop open = $bindable(false)
+ * @prop hidden = $bindable()
+ * @prop modal
+ * @prop offset
+ * @prop width
+ * @prop dismissable
+ * @prop placement = "left"
+ * @prop class: className
+ * @prop transitionParams
+ * @prop transition = fly
+ * @prop outsideclose
+ * @prop activateClickOutside
+ * @prop ...restProps
+ */
+declare const Drawer: import("svelte").Component<DrawerProps, {}, "hidden" | "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/drawer/DrawerHandle.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { getTheme } from "../theme/themeUtils";
+  import type { DrawerHandleProps } from "..";
+  import clsx from "clsx";
+  import { drawerhandle } from "./theme";
+  import { getDrawerContext } from "../context";
+
+  let { children, placement, "aria-label": ariaLabel, class: className, classes, ...restProps }: DrawerHandleProps = $props();
+
+  const ctx = getDrawerContext();
+
+  const theme = $derived(getTheme("drawerhandle"));
+  let { base, handle } = $derived(drawerhandle({ placement: placement ?? ctx?.placement ?? "left" }));
+</script>
+
+<button type="button" aria-label={ariaLabel} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  {@render children?.()}
+  <span class={handle({ class: clsx(theme?.handle, classes?.handle) })}></span>
+</button>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[DrawerHandleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L684)
+## Props
+@prop children
+@prop placement
+@prop "aria-label": ariaLabel
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

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

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

package/dist/drawer/Drawerhead.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { drawerhead } from "./theme";
+  import clsx from "clsx";
+  import type { DrawerheadProps } from "..";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
+
+  let { closeIcon, children, buttonClass, svgClass, class: className, classes, ...restProps }: DrawerheadProps = $props();
+
+  warnThemeDeprecation(
+    "Drawerhead",
+    untrack(() => ({ buttonClass, svgClass })),
+    { buttonClass: "button", svgClass: "svg" }
+  );
+
+  const styling = $derived(classes ?? { button: buttonClass, svg: svgClass });
+
+  const theme = $derived(getTheme("drawer"));
+
+  const { base, button, svg } = $derived(drawerhead());
+</script>
+
+<div class={base({ class: clsx(theme?.base, className) })}>
+  {#if children}
+    {@render children()}
+  {/if}
+  {#if closeIcon}
+    {@render closeIcon()}
+  {:else}
+    <button type="button" {...restProps} class={button({ class: clsx(styling.button) })}>
+      <svg class={svg({ class: clsx(styling.svg) })} 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/)
+## Type
+[DrawerheadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L686)
+## Props
+@prop closeIcon
+@prop children
+@prop buttonClass
+@prop svgClass
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

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

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

package/dist/drawer/index.d.ts

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

package/dist/drawer/index.js

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

package/dist/drawer/theme.d.ts

@@ -0,0 +1,167 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+import { dialog } from "../dialog/theme";
+export type DrawerVariants = VariantProps<typeof drawer> & Classes<typeof drawer> & Classes<typeof dialog>;
+export declare const drawer: import("tailwind-variants").TVReturnType<{
+    placement: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+        top: {
+            base: string;
+        };
+        bottom: {
+            base: string;
+        };
+    };
+    width: {
+        default: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+        half: {
+            base: string;
+        };
+    };
+    modal: {
+        false: {
+            base: string;
+        };
+        true: {
+            base: string;
+        };
+    };
+    shifted: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+}, undefined, {}, {
+    base: string;
+    form: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+    form: string;
+    close: string;
+}, undefined, {}, {
+    base: string;
+    form: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+    form: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>>;
+export type DrawerheadVariants = VariantProps<typeof drawerhead> & Classes<typeof drawerhead>;
+export declare const drawerhead: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            button?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            button?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    button: string;
+    svg: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            button?: 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>>;
+export type DrawerHandleVariants = VariantProps<typeof drawerhandle> & Classes<typeof drawerhandle>;
+export declare const drawerhandle: import("tailwind-variants").TVReturnType<{
+    placement: {
+        left: {
+            base: string;
+            handle: string;
+        };
+        right: {
+            base: string;
+            handle: string;
+        };
+        top: {
+            base: string;
+            handle: string;
+        };
+        bottom: {
+            base: string;
+            handle: string;
+        };
+    };
+}, {
+    base: string;
+    handle: string;
+}, undefined, {
+    placement: {
+        left: {
+            base: string;
+            handle: string;
+        };
+        right: {
+            base: string;
+            handle: string;
+        };
+        top: {
+            base: string;
+            handle: string;
+        };
+        bottom: {
+            base: string;
+            handle: string;
+        };
+    };
+}, {
+    base: string;
+    handle: string;
+}, import("tailwind-variants").TVReturnType<{
+    placement: {
+        left: {
+            base: string;
+            handle: string;
+        };
+        right: {
+            base: string;
+            handle: string;
+        };
+        top: {
+            base: string;
+            handle: string;
+        };
+        bottom: {
+            base: string;
+            handle: string;
+        };
+    };
+}, {
+    base: string;
+    handle: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/drawer/theme.js

@@ -0,0 +1,82 @@
+import { tv } from "tailwind-variants";
+import { dialog } from "../dialog/theme";
+export const drawer = tv({
+    extend: dialog,
+    slots: {
+        base: "p-4 max-h-none max-w-none border border-gray-200 dark:border-gray-700 transform-gpu will-change-transform"
+    },
+    variants: {
+        placement: {
+            left: { base: "me-auto h-full" },
+            right: { base: "ms-auto h-full" },
+            top: { base: "mb-auto w-full!" },
+            bottom: { base: "mt-auto w-full!" }
+        },
+        width: {
+            default: { base: "w-80" },
+            full: { base: "w-full" },
+            half: { base: "w-1/2" }
+        },
+        modal: {
+            false: { base: "fixed inset-0" },
+            true: { base: "" }
+        },
+        shifted: {
+            true: {},
+            false: {}
+        }
+    },
+    compoundVariants: [
+        {
+            shifted: false,
+            modal: false,
+            class: { base: "z-50" }
+        },
+        {
+            shifted: true,
+            placement: "left",
+            class: { base: "-translate-x-full" }
+        },
+        {
+            shifted: true,
+            placement: "right",
+            class: { base: "translate-x-full" }
+        },
+        {
+            shifted: true,
+            placement: "top",
+            class: { base: "-translate-y-full" }
+        },
+        {
+            shifted: true,
+            placement: "bottom",
+            class: { base: "translate-y-full" }
+        }
+    ],
+    defaultVariants: {
+        placement: "left",
+        width: "default",
+        modal: true
+    }
+});
+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-4 w-4"
+    }
+});
+export const drawerhandle = tv({
+    slots: {
+        base: "p-4 absolute flex select-none cursor-grab active:cursor-grabbing focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-300 dark:focus-visible:ring-gray-500",
+        handle: "absolute rounded-lg bg-gray-300 dark:bg-gray-600"
+    },
+    variants: {
+        placement: {
+            left: { base: "inset-y-0 right-0 touch-pan-x", handle: "w-1 h-8 top-1/2 -translate-y-1/2" },
+            right: { base: "inset-y-0 left-0 touch-pan-x", handle: "w-1 h-8 top-1/2 -translate-y-1/2" },
+            top: { base: "inset-x-0 bottom-0 touch-pan-y", handle: "w-8 h-1 left-1/2 -translate-x-1/2" },
+            bottom: { base: "inset-x-0 top-0 touch-pan-y", handle: "w-8 h-1 left-1/2 -translate-x-1/2" }
+        }
+    }
+});

package/dist/dropdown/Dropdown.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { DropdownProps } from "..";
+  import Popper from "../utils/Popper.svelte";
+  import DropdownGroup from "./DropdownGroup.svelte";
+  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
+  import { setDropdownContext } from "../context";
+  import { dropdown } from "./theme";
+
+  let { children, simple = false, placement = "bottom", offset = 2, class: className, activeUrl = "", isOpen = $bindable(false), onclose, ...restProps }: DropdownProps = $props();
+
+  const theme = $derived(getTheme("dropdown"));
+
+  const base = $derived(dropdown({ class: clsx(theme, className) }));
+
+  // Create reactive context using getter
+  const context = {
+    get activeUrl() {
+      return activeUrl ?? "";
+    }
+  };
+
+  setDropdownContext(context);
+</script>
+
+<!-- Dropdown menu -->
+
+<Popper {...restProps} {placement} {offset} bind:isOpen class={base}>
+  {#if simple}
+    <DropdownGroup>
+      {@render children()}
+    </DropdownGroup>
+  {:else}
+    {@render children()}
+  {/if}
+</Popper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[DropdownProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L693)
+## Props
+@prop children
+@prop simple = false
+@prop placement = "bottom"
+@prop offset = 2
+@prop class: className
+@prop activeUrl = ""
+@prop isOpen = $bindable(false)
+@prop onclose
+@prop ...restProps
+-->

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

@@ -0,0 +1,19 @@
+import type { DropdownProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [DropdownProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L693)
+ * ## Props
+ * @prop children
+ * @prop simple = false
+ * @prop placement = "bottom"
+ * @prop offset = 2
+ * @prop class: className
+ * @prop activeUrl = ""
+ * @prop isOpen = $bindable(false)
+ * @prop onclose
+ * @prop ...restProps
+ */
+declare const Dropdown: import("svelte").Component<DropdownProps, {}, "isOpen">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;