flowbite-svelte 0.46.11 → 0.46.12

package/dist/accordion/Accordion.svelte.d.ts

@@ -11,7 +11,7 @@ export interface AccordionCtxType {
 declare const __propDef: {
     props: import("svelte/elements").HTMLAnchorAttributes & {
         tag?: string;
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "light" | "dark" | "default" | "dropdown" | "navbar" | "navbarUl" | "form" | "primary" | "orange" | "none";
+        color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;
         border?: boolean;
         shadow?: boolean;

package/dist/alert/Alert.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: import("svelte/elements").HTMLAnchorAttributes & {
         tag?: string;
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "light" | "dark" | "default" | "dropdown" | "navbar" | "navbarUl" | "form" | "primary" | "orange" | "none";
+        color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;
         border?: boolean;
         shadow?: boolean;

package/dist/cards/Card.svelte.d.ts

@@ -3,7 +3,7 @@ import type { SizeType } from '../types';
 declare const __propDef: {
     props: import("svelte/elements").HTMLAnchorAttributes & {
         tag?: string;
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "light" | "dark" | "default" | "dropdown" | "navbar" | "navbarUl" | "form" | "primary" | "orange" | "none";
+        color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;
         border?: boolean;
         shadow?: boolean;

package/dist/dropdown/Dropdown.svelte

@@ -15,6 +15,12 @@ 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;
 let activeCls = twMerge(activeClass, classActive);
 setContext("DropdownType", { activeClass: activeCls });
 $: activeUrlStore.set(activeUrl);
@@ -23,17 +29,9 @@ $: containerCls = twMerge(containerClass, classContainer);
 $: headerCls = twMerge(headerClass, classHeader);
 $: ulCls = twMerge("py-1", $$props.class);
 $: footerCls = twMerge(footerClass, classFooter);
-$: {
-  $$restProps.arrow = $$restProps.arrow ?? false;
-  $$restProps.trigger = $$restProps.trigger ?? "click";
-  $$restProps.placement = $$restProps.placement ?? "bottom";
-  $$restProps.color = $$restProps.color ?? "dropdown";
-  $$restProps.shadow = $$restProps.shadow ?? true;
-  $$restProps.rounded = $$restProps.rounded ?? true;
-}
 </script>
 
-<Popper activeContent {...$$restProps} class={containerCls} on:show bind:open>
+<Popper activeContent {...$$restProps} {trigger} {arrow} {placement} {shadow} {rounded} {color} class={containerCls} on:show bind:open>
   {#if $$slots.header}
     <div class={headerCls}>
       <slot name="header" />
@@ -63,4 +61,10 @@ $: {
 @prop export let classFooter: string | undefined = undefined;
 @prop export let activeClass: string = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
 @prop export let classActive: string | undefined = undefined;
+@prop export let arrow: boolean = false;
+@prop export let trigger: 'hover' | 'click' | 'focus' = 'click';
+@prop export let placement: Placement = 'bottom';
+@prop export let color: FrameColor = 'dropdown';
+@prop export let shadow: boolean = true;
+@prop export let rounded: boolean = true;
 -->

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

@@ -2,42 +2,27 @@ import { SvelteComponentTyped } from "svelte";
 export type DropdownType = {
     activeClass: string;
 };
+import type { Placement } from '@floating-ui/dom';
+import type { FrameColor } from '../utils/Frame.svelte';
 declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
-        tag?: string;
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "light" | "dark" | "default" | "dropdown" | "navbar" | "navbarUl" | "form" | "primary" | "orange" | "none";
-        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;
-    } & {
+    props: {
+        [x: string]: any;
         activeUrl?: string;
+        open?: boolean;
         containerClass?: string;
-        classContainer?: string;
+        classContainer?: string | undefined;
         headerClass?: string;
-        classHeader?: string;
+        classHeader?: string | undefined;
         footerClass?: string;
-        classFooter?: string;
+        classFooter?: string | undefined;
         activeClass?: string;
-        classActive?: string;
+        classActive?: string | undefined;
+        arrow?: boolean;
+        trigger?: "hover" | "click" | "focus";
+        placement?: Placement;
+        color?: FrameColor;
+        shadow?: boolean;
+        rounded?: boolean;
     };
     events: {
         show: CustomEvent<any>;
@@ -66,6 +51,12 @@ export type DropdownSlots = typeof __propDef.slots;
  * @prop export let classFooter: string | undefined = undefined;
  * @prop export let activeClass: string = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
  * @prop export let classActive: string | undefined = undefined;
+ * @prop export let arrow: boolean = false;
+ * @prop export let trigger: 'hover' | 'click' | 'focus' = 'click';
+ * @prop export let placement: Placement = 'bottom';
+ * @prop export let color: FrameColor = 'dropdown';
+ * @prop export let shadow: boolean = true;
+ * @prop export let rounded: boolean = true;
  */
 export default class Dropdown extends SvelteComponentTyped<DropdownProps, DropdownEvents, DropdownSlots> {
 }

package/dist/list-group/Listgroup.svelte.d.ts

@@ -3,7 +3,7 @@ import type { ListGroupItemType } from '../types';
 declare const __propDef: {
     props: import("svelte/elements").HTMLAnchorAttributes & {
         tag?: string;
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "light" | "dark" | "default" | "dropdown" | "navbar" | "navbarUl" | "form" | "primary" | "orange" | "none";
+        color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;
         border?: boolean;
         shadow?: boolean;

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

@@ -3,7 +3,7 @@ import type { LinkType } from '../types';
 declare const __propDef: {
     props: import("svelte/elements").HTMLAnchorAttributes & {
         tag?: string;
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "light" | "dark" | "default" | "dropdown" | "navbar" | "navbarUl" | "form" | "primary" | "orange" | "none";
+        color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;
         border?: boolean;
         shadow?: boolean;

package/dist/modal/Modal.svelte.d.ts

@@ -4,7 +4,7 @@ import type { ModalPlacementType } from '../types';
 declare const __propDef: {
     props: import("svelte/elements").HTMLAnchorAttributes & {
         tag?: string;
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "light" | "dark" | "default" | "dropdown" | "navbar" | "navbarUl" | "form" | "primary" | "orange" | "none";
+        color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;
         border?: boolean;
         shadow?: boolean;

package/dist/navbar/Navbar.svelte.d.ts

@@ -3,7 +3,7 @@ import NavContainer from './NavContainer.svelte';
 declare const __propDef: {
     props: import("svelte/elements").HTMLAnchorAttributes & {
         tag?: string;
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "light" | "dark" | "default" | "dropdown" | "navbar" | "navbarUl" | "form" | "primary" | "orange" | "none";
+        color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;
         border?: boolean;
         shadow?: boolean;

package/dist/popover/Popover.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: import("svelte/elements").HTMLAnchorAttributes & {
         tag?: string;
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "light" | "dark" | "default" | "dropdown" | "navbar" | "navbarUl" | "form" | "primary" | "orange" | "none";
+        color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;
         border?: boolean;
         shadow?: boolean;

package/dist/toast/Toast.svelte

@@ -27,7 +27,7 @@ let finalDivClass = twMerge(
 );
 const colors = {
   primary: "text-primary-500 bg-primary-100 dark:bg-primary-800 dark:text-primary-200",
-  gray: "text-gray-500 bg-gray-100 dark:bg-gray-700 dark:text-gray-200",
+  dark: "text-gray-500 bg-gray-100 dark:bg-gray-700 dark:text-gray-200",
   red: "text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200",
   yellow: "text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200",
   green: "text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200",

package/dist/toolbar/Toolbar.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: import("svelte/elements").HTMLAnchorAttributes & {
         tag?: string;
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "light" | "dark" | "default" | "dropdown" | "navbar" | "navbarUl" | "form" | "primary" | "orange" | "none";
+        color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;
         border?: boolean;
         shadow?: boolean;

package/dist/tooltip/Tooltip.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: import("svelte/elements").HTMLAnchorAttributes & {
         tag?: string;
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "light" | "dark" | "default" | "dropdown" | "navbar" | "navbarUl" | "form" | "primary" | "orange" | "none";
+        color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;
         border?: boolean;
         shadow?: boolean;

package/dist/types.d.ts

@@ -7,7 +7,7 @@ export type CheckboxItem = {
     label?: string;
     isChecked?: boolean;
 };
-export type ColorVariant = 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'primary' | 'none';
+export type ColorVariant = 'dark' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'primary' | 'none';
 export type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink' | 'white' | 'custom' | 'primary' | 'secondary';
 export type ImgType = {
     src: string;

package/dist/utils/Frame.svelte

@@ -1,3 +1,25 @@
+<script context="module">const bgColors = {
+  gray: "bg-gray-50 dark:bg-gray-800",
+  red: "bg-red-50 dark:bg-gray-800",
+  yellow: "bg-yellow-50 dark:bg-gray-800 ",
+  green: "bg-green-50 dark:bg-gray-800 ",
+  indigo: "bg-indigo-50 dark:bg-gray-800 ",
+  purple: "bg-purple-50 dark:bg-gray-800 ",
+  pink: "bg-pink-50 dark:bg-gray-800 ",
+  blue: "bg-blue-50 dark:bg-gray-800 ",
+  light: "bg-gray-50 dark:bg-gray-700",
+  dark: "bg-gray-50 dark:bg-gray-800",
+  default: "bg-white dark:bg-gray-800",
+  dropdown: "bg-white dark:bg-gray-700",
+  navbar: "bg-white dark:bg-gray-900",
+  navbarUl: "bg-gray-50 dark:bg-gray-800",
+  form: "bg-gray-50 dark:bg-gray-700",
+  primary: "bg-primary-50 dark:bg-gray-800 ",
+  orange: "bg-orange-50 dark:bg-orange-800",
+  none: ""
+};
+</script>
+
 <script>import { createEventDispatcher, setContext } from "svelte";
 import { twMerge } from "tailwind-merge";
 import {} from "svelte/transition";
@@ -21,26 +43,6 @@ $: dispatch(open ? "open" : "close");
 $: dispatch("show", open);
 $: color = color ?? "default";
 $: setContext("color", color);
-const bgColors = {
-  gray: "bg-gray-50 dark:bg-gray-800",
-  red: "bg-red-50 dark:bg-gray-800",
-  yellow: "bg-yellow-50 dark:bg-gray-800 ",
-  green: "bg-green-50 dark:bg-gray-800 ",
-  indigo: "bg-indigo-50 dark:bg-gray-800 ",
-  purple: "bg-purple-50 dark:bg-gray-800 ",
-  pink: "bg-pink-50 dark:bg-gray-800 ",
-  blue: "bg-blue-50 dark:bg-gray-800 ",
-  light: "bg-gray-50 dark:bg-gray-700",
-  dark: "bg-gray-50 dark:bg-gray-800",
-  default: "bg-white dark:bg-gray-800",
-  dropdown: "bg-white dark:bg-gray-700",
-  navbar: "bg-white dark:bg-gray-900",
-  navbarUl: "bg-gray-50 dark:bg-gray-800",
-  form: "bg-gray-50 dark:bg-gray-700",
-  primary: "bg-primary-50 dark:bg-gray-800 ",
-  orange: "bg-orange-50 dark:bg-orange-800",
-  none: ""
-};
 const textColors = {
   gray: "text-gray-800 dark:text-gray-300",
   red: "text-red-800 dark:text-red-400",

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

@@ -1,11 +1,32 @@
 import { SvelteComponentTyped } from "svelte";
+export type FrameColor = keyof typeof bgColors;
+declare const bgColors: {
+    gray: string;
+    red: string;
+    yellow: string;
+    green: string;
+    indigo: string;
+    purple: string;
+    pink: string;
+    blue: string;
+    light: string;
+    dark: string;
+    default: string;
+    dropdown: string;
+    navbar: string;
+    navbarUl: string;
+    form: string;
+    primary: string;
+    orange: string;
+    none: string;
+};
 import type { Action } from 'svelte/action';
 import type { HTMLAnchorAttributes } from 'svelte/elements';
 import { type TransitionConfig } from 'svelte/transition';
 declare const __propDef: {
     props: HTMLAnchorAttributes & {
         tag?: string;
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "light" | "dark" | "default" | "dropdown" | "navbar" | "navbarUl" | "form" | "primary" | "orange" | "none";
+        color?: FrameColor;
         rounded?: boolean;
         border?: boolean;
         shadow?: boolean;

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

@@ -3,7 +3,7 @@ import type { Placement } from '@floating-ui/dom';
 declare const __propDef: {
     props: import("svelte/elements").HTMLAnchorAttributes & {
         tag?: string;
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "light" | "dark" | "default" | "dropdown" | "navbar" | "navbarUl" | "form" | "primary" | "orange" | "none";
+        color?: import("./Frame.svelte").FrameColor;
         rounded?: boolean;
         border?: boolean;
         shadow?: boolean;

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

@@ -4,7 +4,7 @@ import { type TransitionConfig } from 'svelte/transition';
 declare const __propDef: {
     props: import("svelte/elements").HTMLAnchorAttributes & {
         tag?: string;
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "light" | "dark" | "default" | "dropdown" | "navbar" | "navbarUl" | "form" | "primary" | "orange" | "none";
+        color?: import("./Frame.svelte").FrameColor;
         rounded?: boolean;
         border?: boolean;
         shadow?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.46.11",
+  "version": "0.46.12",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -28,7 +28,7 @@
     "eslint": "^9.5.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.41.0",
-    "flowbite-svelte": "^0.46.11",
+    "flowbite-svelte": "^0.46.12",
     "flowbite-svelte-blocks": "^1.1.3",
     "flowbite-svelte-icons": "^1.6.1",
     "mdsvex": "^0.11.2",
@@ -39,7 +39,7 @@
     "prism-themes": "^1.9.0",
     "publint": "^0.2.8",
     "svelte": "^4.2.18",
-    "svelte-check": "^3.8.3",
+    "svelte-check": "^3.8.4",
     "svelte-lib-helpers": "^0.4.6",
     "svelte-meta-tags": "^3.1.2",
     "svelte-preprocess": "^6.0.1",