flowbite-svelte 1.10.21 → 1.11.0

package/dist/utils/Arrow.svelte

@@ -50,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2021)
+[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2023)
 ## Props
 @prop placement = "top"
 @prop cords

package/dist/utils/Arrow.svelte.d.ts

@@ -2,7 +2,7 @@ import { type ArrowProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2021)
+ * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2023)
  * ## Props
  * @prop placement = "top"
  * @prop cords

package/dist/utils/CloseButton.svelte

@@ -1,11 +1,20 @@
 <script lang="ts">
   import clsx from "clsx";
   import { type CloseButtonProps } from "..";
-  import { closeButtonVariants } from ".";
+  import { closeButton } from ".";
+  import { useDismiss } from "./dismissable.svelte";
 
-  let { children, color = "gray", onclick, name = "Close", ariaLabel, size = "md", class: className, svgClass, ...restProps }: CloseButtonProps = $props();
+  let { children, color = "gray", onclick: onclickorg, name = "Close", ariaLabel, size = "md", class: className, svgClass, ...restProps }: CloseButtonProps = $props();
 
-  const { base, svg } = $derived(closeButtonVariants({ color, size }));
+  const { base, svg } = $derived(closeButton({ color, size }));
+
+  const context = useDismiss();
+
+  function onclick(event: MouseEvent) {
+    onclickorg?.(event);
+    if (event.defaultPrevented) return;
+    context?.dismiss?.(event);
+  }
 </script>
 
 {#if restProps.href === undefined}
@@ -36,11 +45,11 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L113)
+[CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L115)
 ## Props
 @prop children
 @prop color = "gray"
-@prop onclick
+@prop onclick: onclickorg
 @prop name = "Close"
 @prop ariaLabel
 @prop size = "md"

package/dist/utils/CloseButton.svelte.d.ts

@@ -2,11 +2,11 @@ import { type CloseButtonProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L113)
+ * [CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L115)
  * ## Props
  * @prop children
  * @prop color = "gray"
- * @prop onclick
+ * @prop onclick: onclickorg
  * @prop name = "Close"
  * @prop ariaLabel
  * @prop size = "md"

package/dist/utils/Popper.svelte

@@ -213,7 +213,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2001)
+[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2003)
 ## Props
 @prop triggeredBy
 @prop triggerDelay = 200

package/dist/utils/Popper.svelte.d.ts

@@ -2,7 +2,7 @@ import type { PopperProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2001)
+ * [PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2003)
  * ## Props
  * @prop triggeredBy
  * @prop triggerDelay = 200

package/dist/utils/dismissable.svelte.d.ts

@@ -0,0 +1,9 @@
+/**
+ * DismissableContext provides a way to dismiss a component or modal.
+ * It should be used within a component that needs to provide dismiss functionality.
+ */
+export type DismissableContext = {
+    dismiss: (event: MouseEvent) => void;
+};
+export declare function createDismissableContext(onDismiss: (event: MouseEvent) => void): DismissableContext;
+export declare function useDismiss(): DismissableContext;

package/dist/utils/dismissable.svelte.js

@@ -0,0 +1,16 @@
+import { getContext, setContext } from "svelte";
+const DISMISSABLE_KEY = Symbol("dismissable");
+export function createDismissableContext(onDismiss) {
+    const context = {
+        dismiss: onDismiss
+    };
+    return setContext(DISMISSABLE_KEY, context);
+}
+export function useDismiss() {
+    const context = getContext(DISMISSABLE_KEY);
+    if (!context) {
+        // uncomment below line if you want to trace usage without the context
+        // console.warn('useDismiss must be used within a Dismissable component'); // For development purposes
+    }
+    return context;
+}

package/dist/utils/index.d.ts

@@ -1,6 +1,6 @@
 import { type ClassValue } from "clsx";
 export { default as CloseButton } from "./CloseButton.svelte";
-export { closeButtonVariants } from "./theme";
+export { closeButton } from "./theme";
 export { trapFocus } from "./actions";
 export { default as Popper } from "./Popper.svelte";
 export declare function cn(...inputs: ClassValue[]): string;

package/dist/utils/index.js

@@ -1,7 +1,7 @@
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 export { default as CloseButton } from "./CloseButton.svelte";
-export { closeButtonVariants } from "./theme";
+export { closeButton } from "./theme";
 export { trapFocus } from "./actions";
 export { default as Popper } from "./Popper.svelte";
 export function cn(...inputs) {

package/dist/utils/theme.d.ts

@@ -1,4 +1,7 @@
-export declare const closeButtonVariants: import("tailwind-variants").TVReturnType<{
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type CloseButtonVariants = VariantProps<typeof closeButton> & Classes<typeof closeButton>;
+export declare const closeButton: import("tailwind-variants").TVReturnType<{
     color: {
         primary: string;
         secondary: string;

package/dist/utils/theme.js

@@ -1,5 +1,5 @@
 import { tv } from "tailwind-variants";
-export const closeButtonVariants = tv({
+export const closeButton = tv({
     base: "focus:outline-hidden whitespace-normal",
     variants: {
         // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose

package/dist/video/Video.svelte

@@ -21,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1988)
+[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1990)
 ## Props
 @prop children
 @prop type = "video/mp4"

package/dist/video/Video.svelte.d.ts

@@ -2,7 +2,7 @@ import type { VideoProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1988)
+ * [VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1990)
  * ## Props
  * @prop children
  * @prop type = "video/mp4"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.10.21",
+  "version": "1.11.0",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {