flowbite-svelte 0.46.9 → 0.46.11

package/dist/forms/Checkbox.svelte

@@ -1,21 +1,25 @@
 <script>import { getContext } from "svelte";
 import { labelClass, inputClass } from "./Radio.svelte";
 import Label from "./Label.svelte";
-export let name;
+export let name = void 0;
 export let color = "primary";
 export let custom = false;
 export let inline = false;
-export let group;
-export let choices;
+export let group = [];
+export let choices = [];
 export let value = "on";
 export let checked = void 0;
 export let spacing = $$slots.default ? "me-2" : "";
+export let groupLabelClass = "";
+export let groupInputClass = "";
 let background = getContext("background");
 </script>
-{#if group}
-  {#each choices as checkbox}
-    <label for={`checkbox-${value}`}>{ checkbox.label }</label>
-    <input type="checkbox" value={ checkbox.value } bind:group>
+{#if choices.length > 0}
+  {#each choices as {value, label}, i}
+    <Label class={labelClass(inline, groupLabelClass)} show={$$slots.default} for={`checkbox-${i}`}>{ label }
+      <input {name} id={`checkbox-${i}`} type="checkbox" value={ value } bind:group {...$$restProps}  class={inputClass(custom, color, true, background, spacing, groupInputClass)} />
+      <slot />
+    </Label>
   {/each}
 {:else}
 <Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
@@ -28,13 +32,15 @@ let background = getContext("background");
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let name: string;
+@prop export let name: string | undefined = undefined;
 @prop export let color: FormColorType = 'primary';
 @prop export let custom: boolean = false;
 @prop export let inline: boolean = false;
-@prop export let group: CheckboxItem[];
-@prop export let choices: CheckboxItem[];
+@prop export let group: string[] = [];
+@prop export let choices: CheckboxItem[] = [];
 @prop export let value: string | number = 'on';
 @prop export let checked: boolean | undefined = undefined;
 @prop export let spacing: string = $$slots.default ? 'me-2' : '';
+@prop export let groupLabelClass: string = '';
+@prop export let groupInputClass: strixng = '';
 -->

package/dist/forms/Checkbox.svelte.d.ts

@@ -1,25 +1,20 @@
 import { SvelteComponentTyped } from "svelte";
 import type { FormColorType } from '../types';
+import type { CheckboxItem } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        name: string;
+        name?: string | undefined;
         color?: FormColorType;
         custom?: boolean;
         inline?: boolean;
-        group: {
-            value: string;
-            label: string;
-            isChecked?: boolean;
-        }[];
-        choices: {
-            value: string;
-            label: string;
-            isChecked?: boolean;
-        }[];
+        group?: string[];
+        choices?: CheckboxItem[];
         value?: string | number;
         checked?: boolean | undefined;
         spacing?: string;
+        groupLabelClass?: string;
+        groupInputClass?: any;
     };
     events: {
         keyup: KeyboardEvent;
@@ -46,15 +41,17 @@ export type CheckboxSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let name: string;
+ * @prop export let name: string | undefined = undefined;
  * @prop export let color: FormColorType = 'primary';
  * @prop export let custom: boolean = false;
  * @prop export let inline: boolean = false;
- * @prop export let group: CheckboxItem[];
- * @prop export let choices: CheckboxItem[];
+ * @prop export let group: string[] = [];
+ * @prop export let choices: CheckboxItem[] = [];
  * @prop export let value: string | number = 'on';
  * @prop export let checked: boolean | undefined = undefined;
  * @prop export let spacing: string = $$slots.default ? 'me-2' : '';
+ * @prop export let groupLabelClass: string = '';
+ * @prop export let groupInputClass: strixng = '';
  */
 export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
 }

package/dist/toast/Toast.svelte

@@ -1,7 +1,6 @@
-<script>import TransitionFrame from "../utils/TransitionFrame.svelte";
+<script>import { fade } from "svelte/transition";
 import { twMerge } from "tailwind-merge";
-import CloseButton from "../utils/CloseButton.svelte";
-import Frame from "../utils/Frame.svelte";
+import { CloseButton } from "..";
 export let dismissable = true;
 export let color = "primary";
 export let position = "none";
@@ -9,6 +8,9 @@ export let divClass = "w-full max-w-xs p-4 text-gray-500 bg-white shadow dark:te
 export let defaultIconClass = "w-8 h-8";
 export let contentClass = "w-full text-sm font-normal";
 export let align = true;
+export let transition = fade;
+export let params = {};
+export let toastStatus = true;
 const positions = {
   "top-left": "absolute top-5 start-5",
   "top-right": "absolute top-5 end-5",
@@ -16,8 +18,13 @@ const positions = {
   "bottom-right": "absolute bottom-5 end-5",
   none: ""
 };
-let finalDivClass;
-$: finalDivClass = twMerge("flex", align ? "items-center" : "items-start", divClass, positions[position], $$props.class);
+let finalDivClass = twMerge(
+  "flex",
+  align ? "items-center" : "items-start",
+  divClass,
+  positions[position],
+  $$props.class
+);
 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",
@@ -27,41 +34,61 @@ const colors = {
   blue: "text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200",
   indigo: "text-indigo-500 bg-indigo-100 dark:bg-indigo-800 dark:text-indigo-200",
   purple: "text-purple-500 bg-purple-100 dark:bg-purple-800 dark:text-purple-200",
-  orange: "text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200",
+  pink: "text-pink-500 bg-pink-100 dark:bg-pink-700 dark:text-pink-200",
   none: ""
 };
-let iconClass;
-$: iconClass = twMerge("inline-flex items-center justify-center shrink-0", colors[color], defaultIconClass);
-const clsBtnExtraClass = "-mx-1.5 -my-1.5 text-gray-400 hover:text-gray-900 focus:!ring-gray-300 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-white dark:hover:bg-gray-700";
+let iconClass = twMerge(
+  "inline-flex items-center justify-center shrink-0 rounded-lg",
+  colors[color],
+  defaultIconClass
+);
+const clsBtnExtraClass = "ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700";
 </script>
 
-<TransitionFrame rounded color="none" role="alert" {...$$restProps} class={finalDivClass} let:close on:close>
-  {#if $$slots.icon}
-    <Frame rounded color="none" class={iconClass}>
-      <slot name="icon" />
-    </Frame>
-  {/if}
+{#if toastStatus}
+  <div
+    role="alert"
+    {...$$restProps}
+    class={finalDivClass}
+    transition:transition={params}
+  >
+    {#if $$slots.icon}
+      <div class={iconClass}>
+        <slot name="icon" />
+      </div>
+    {/if}
 
-  <div class={contentClass}>
-    <slot />
-  </div>
+    <div class={contentClass}>
+        <slot />
+    </div>
 
-  {#if dismissable}
-    <slot name="close-button" {close}>
-      <CloseButton class={clsBtnExtraClass} on:click={close} />
-    </slot>
-  {/if}
-</TransitionFrame>
+    {#if dismissable}
+      <CloseButton
+        divclass={clsBtnExtraClass}
+        ariaLabel="Remove toast"
+        {color}
+        on:click={() => {
+          toastStatus = false;
+        }}
+      />
+    {/if}
+  </div>
+{/if}
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let dismissable: boolean = true;
-@prop export let color: 'primary' | 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'orange' | 'none' = 'primary';
-@prop export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none' = 'none';
+@prop export let color: ColorVariant = 'primary';
+@prop export let position: ToastPositionType = 'none';
 @prop export let divClass: string = 'w-full max-w-xs p-4 text-gray-500 bg-white shadow dark:text-gray-400 dark:bg-gray-800 gap-3';
 @prop export let defaultIconClass: string = 'w-8 h-8';
 @prop export let contentClass: string = 'w-full text-sm font-normal';
+@prop export let div2class: string = '';
+@prop export let div3class: string = '';
 @prop export let align: boolean = true;
+@prop export let transition: TransitionFunc = fade;
+@prop export let params = {};
+@prop export let toastStatus: boolean = true;
 -->

package/dist/toast/Toast.svelte.d.ts

@@ -1,38 +1,26 @@
 import { SvelteComponentTyped } from "svelte";
+import { type TransitionConfig } from 'svelte/transition';
+import type { ColorVariant, ToastPositionType } 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";
-        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;
-    } & import("..").Dismissable & {
-        color?: "primary" | "gray" | "red" | "yellow" | "green" | "blue" | "indigo" | "purple" | "orange" | "none";
-        position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "none";
+    props: {
+        [x: string]: any;
+        dismissable?: boolean;
+        color?: ColorVariant;
+        position?: ToastPositionType;
         divClass?: string;
         defaultIconClass?: string;
-        extraIconClass?: string;
         contentClass?: string;
+        align?: boolean;
+        transition?: (node: HTMLElement, params: any) => TransitionConfig;
+        params?: {};
+        toastStatus?: boolean;
     };
     events: {
-        close: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         icon: {};
         default: {};
-        'close-button': {
-            close: (ev: MouseEvent | undefined) => void;
-        };
     };
 };
 export type ToastProps = typeof __propDef.props;
@@ -42,12 +30,17 @@ export type ToastSlots = typeof __propDef.slots;
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let dismissable: boolean = true;
- * @prop export let color: 'primary' | 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'orange' | 'none' = 'primary';
- * @prop export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none' = 'none';
+ * @prop export let color: ColorVariant = 'primary';
+ * @prop export let position: ToastPositionType = 'none';
  * @prop export let divClass: string = 'w-full max-w-xs p-4 text-gray-500 bg-white shadow dark:text-gray-400 dark:bg-gray-800 gap-3';
  * @prop export let defaultIconClass: string = 'w-8 h-8';
  * @prop export let contentClass: string = 'w-full text-sm font-normal';
+ * @prop export let div2class: string = '';
+ * @prop export let div3class: string = '';
  * @prop export let align: boolean = true;
+ * @prop export let transition: TransitionFunc = fade;
+ * @prop export let params = {};
+ * @prop export let toastStatus: boolean = true;
  */
 export default class Toast extends SvelteComponentTyped<ToastProps, ToastEvents, ToastSlots> {
 }

package/dist/types.d.ts

@@ -2,7 +2,12 @@ import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements
 export type BlockQuoteType = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
 export type ButtonType = 'button' | 'submit' | 'reset';
 export type ButtonColorType = 'alternative' | 'blue' | 'dark' | 'green' | 'light' | 'primary' | 'purple' | 'red' | 'yellow' | 'none';
-export type ColorVariant = 'dark' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'primary' | 'none';
+export type CheckboxItem = {
+    value: string;
+    label?: string;
+    isChecked?: boolean;
+};
+export type ColorVariant = 'gray' | '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;
@@ -112,3 +117,4 @@ export interface ButtonClassesTypes {
     video?: string;
     custom?: string;
 }
+export type ToastPositionType = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.46.9",
+  "version": "0.46.11",
   "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.9",
+    "flowbite-svelte": "^0.46.11",
     "flowbite-svelte-blocks": "^1.1.3",
     "flowbite-svelte-icons": "^1.6.1",
     "mdsvex": "^0.11.2",
@@ -39,11 +39,11 @@
     "prism-themes": "^1.9.0",
     "publint": "^0.2.8",
     "svelte": "^4.2.18",
-    "svelte-check": "^3.8.2",
+    "svelte-check": "^3.8.3",
     "svelte-lib-helpers": "^0.4.6",
     "svelte-meta-tags": "^3.1.2",
     "svelte-preprocess": "^6.0.1",
-    "svelte2tsx": "^0.7.11",
+    "svelte2tsx": "^0.7.13",
     "tailwind-merge": "^1.13.1",
     "tailwindcss": "^3.4.4",
     "tslib": "^2.6.3",
@@ -100,7 +100,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.6",
-    "apexcharts": "^3.49.1",
+    "apexcharts": "^3.49.2",
     "flowbite": "^2.3.0",
     "tailwind-merge": "^2.3.0"
   },