flowbite-svelte 0.44.22 → 0.44.23

package/dist/buttons/Button.svelte

@@ -11,7 +11,7 @@ export let shadow = false;
 export let tag = 'button';
 export let checked = undefined;
 const colorClasses = {
-    alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 hover:text-primary-700 focus-within:text-primary-700 dark:focus-within:text-white dark:hover:text-white',
+    alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 hover:text-primary-700 focus-within:text-primary-700 dark:focus-within:text-white dark:hover:text-white dark:hover:bg-gray-700',
     blue: 'text-white bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700',
     dark: 'text-white bg-gray-800 hover:bg-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700',
     green: 'text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700',
@@ -79,7 +79,7 @@ const sizeClasses = {
 };
 const hasBorder = () => outline || color === 'alternative' || color === 'light';
 let buttonClass;
-$: buttonClass = twMerge('text-center font-medium', group ? 'focus-within:ring-2' : 'focus-within:ring-4', group && 'focus-within:z-10', group || 'focus-within:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], outline && checked && 'border dark:border-gray-900', outline && checked && colorCheckedClasses[color], outline && !checked && outlineClasses[color], !outline && checked && colorCheckedClasses[color], !outline && !checked && colorClasses[color], color === 'alternative' && (group && !checked ? 'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600' : 'dark:bg-transparent dark:border-gray-600 dark:hover:border-gray-700'), outline && color === 'dark' && (group ? (checked ? 'bg-gray-900 border-gray-800 dark:border-white dark:bg-gray-600' : 'dark:text-white border-gray-800 dark:border-white') : 'dark:text-gray-400 dark:border-gray-700'), coloredFocusClasses[color], hasBorder() && group && 'border-s-0 first:border-s', group ? (pill && 'first:rounded-s-full last:rounded-e-full') || 'first:rounded-s-lg last:rounded-e-lg' : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
+$: buttonClass = twMerge('text-center font-medium', group ? 'focus-within:ring-2' : 'focus-within:ring-4', group && 'focus-within:z-10', group || 'focus-within:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], outline && checked && 'border dark:border-gray-900', outline && checked && colorCheckedClasses[color], outline && !checked && outlineClasses[color], !outline && checked && colorCheckedClasses[color], !outline && !checked && colorClasses[color], color === 'alternative' && (group && !checked ? 'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600' : 'dark:bg-transparent dark:border-gray-600 dark:hover:border-gray-600'), outline && color === 'dark' && (group ? (checked ? 'bg-gray-900 border-gray-800 dark:border-white dark:bg-gray-600' : 'dark:text-white border-gray-800 dark:border-white') : 'dark:text-gray-400 dark:border-gray-700'), coloredFocusClasses[color], hasBorder() && group && 'border-s-0 first:border-s', group ? (pill && 'first:rounded-s-full last:rounded-e-full') || 'first:rounded-s-lg last:rounded-e-lg' : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
 </script>
 
 {#if href}

package/dist/cards/Card.svelte

@@ -7,23 +7,25 @@ export let img = undefined;
 export let padding = 'lg';
 export let size = 'sm';
 const paddings = {
-    none: 'p-0',
-    sm: 'p-4 sm:p-6 md:p-8',
+    none: '',
+    xs: 'p-2',
+    sm: 'p-4',
     md: 'p-4 sm:p-5',
     lg: 'p-4 sm:p-6',
     xl: 'p-4 sm:p-8'
 };
 const sizes = {
+    none: '',
     xs: 'max-w-xs',
     sm: 'max-w-sm',
-    md: 'max-w-lg',
+    md: 'max-w-xl',
     lg: 'max-w-2xl',
     xl: 'max-w-screen-xl'
 };
 let innerPadding;
 $: innerPadding = paddings[padding];
 let cardClass;
-$: cardClass = twMerge('flex', sizes[size], reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse' : 'md:flex-row'), href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPadding, $$props.class);
+$: cardClass = twMerge('flex w-full', sizes[size], reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse' : 'md:flex-row'), href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPadding, $$props.class);
 let imgClass;
 $: imgClass = twMerge(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none', horizontal && (reverse ? 'md:rounded-e-lg' : 'md:rounded-s-lg'));
 </script>
@@ -47,6 +49,6 @@ $: imgClass = twMerge(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && '
 @prop export let horizontal: boolean = false;
 @prop export let reverse: boolean = false;
 @prop export let img: string | undefined = undefined;
-@prop export let padding: 'none' | 'sm' | 'md' | 'lg' | 'xl' = 'lg';
-@prop export let size: SizeType = 'sm';
+@prop export let padding: SizeType | 'none' = 'lg';
+@prop export let size: SizeType | 'none' = 'sm';
 -->

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

@@ -16,8 +16,8 @@ declare const __propDef: {
         horizontal?: boolean | undefined;
         reverse?: boolean | undefined;
         img?: string | undefined;
-        padding?: "none" | "sm" | "lg" | "xl" | "md" | undefined;
-        size?: SizeType | undefined;
+        padding?: "none" | SizeType | undefined;
+        size?: "none" | SizeType | undefined;
     };
     events: {
         click: MouseEvent;
@@ -42,8 +42,8 @@ export type CardSlots = typeof __propDef.slots;
  * @prop export let horizontal: boolean = false;
  * @prop export let reverse: boolean = false;
  * @prop export let img: string | undefined = undefined;
- * @prop export let padding: 'none' | 'sm' | 'md' | 'lg' | 'xl' = 'lg';
- * @prop export let size: SizeType = 'sm';
+ * @prop export let padding: SizeType | 'none' = 'lg';
+ * @prop export let size: SizeType | 'none' = 'sm';
  */
 export default class Card extends SvelteComponent<CardProps, CardEvents, CardSlots> {
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/cards/Card.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAoE3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,eAAe,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CAClF"}
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/cards/Card.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAsE3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,eAAe,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CAClF"}

package/dist/darkmode/DarkMode.svelte

@@ -1,5 +1,5 @@
 <script>import { twMerge } from 'tailwind-merge';
-export let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
+export let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5';
 export let size = 'md';
 export let ariaLabel = 'Dark mode';
 const sizes = {
@@ -53,7 +53,7 @@ const toggleTheme = (ev) => {
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let btnClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
+@prop export let btnClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5';
 @prop export let size: 'sm' | 'md' | 'lg' = 'md';
 @prop export let ariaLabel: string = 'Dark mode';
 -->

package/dist/darkmode/DarkMode.svelte.d.ts

@@ -20,7 +20,7 @@ export type DarkModeSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let btnClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
+ * @prop export let btnClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5';
  * @prop export let size: 'sm' | 'md' | 'lg' = 'md';
  * @prop export let ariaLabel: string = 'Dark mode';
  */

package/dist/forms/Radio.svelte

@@ -21,7 +21,7 @@ import Label from './Label.svelte';
 export let color = 'primary';
 export let custom = false;
 export let inline = false;
-export let group = '';
+export let group = undefined;
 export let value = '';
 // tinted if put in component having its own background
 let background = getContext('background');
@@ -40,6 +40,6 @@ let background = getContext('background');
 @prop export let color: FormColorType = 'primary';
 @prop export let custom: boolean = false;
 @prop export let inline: boolean = false;
-@prop export let group: number | string = '';
+@prop export let group: number | string | undefined = undefined;
 @prop export let value: number | string = '';
 -->

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

@@ -9,7 +9,7 @@ declare const __propDef: {
         color?: FormColorType | undefined;
         custom?: boolean | undefined;
         inline?: boolean | undefined;
-        group?: string | number | undefined;
+        group?: number | string | undefined;
         value?: string | number | undefined;
     };
     events: {
@@ -41,7 +41,7 @@ export type RadioSlots = typeof __propDef.slots;
  * @prop export let color: FormColorType = 'primary';
  * @prop export let custom: boolean = false;
  * @prop export let inline: boolean = false;
- * @prop export let group: number | string = '';
+ * @prop export let group: number | string | undefined = undefined;
  * @prop export let value: number | string = '';
  */
 export default class Radio extends SvelteComponent<RadioProps, RadioEvents, RadioSlots> {

package/dist/forms/Radio.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Radio.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAgBC,eAAO,MAAM,UAAU,WAAY,OAAO,cAAc,MAAM,WAAyE,CAAC;AACxI,eAAO,IAAI,OAAO,EAAE,MAAe,CAAC;AAEpC,eAAO,MAAM,UAAU,WAAY,OAAO,SAAS,aAAa,WAAW,OAAO,UAAU,OAAO,cAAc,MAAM,WAAgR,CAAC;AAI1Y,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA6B9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}
+{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Radio.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAgBC,eAAO,MAAM,UAAU,WAAY,OAAO,cAAc,MAAM,WAAyE,CAAC;AACxI,eAAO,IAAI,OAAO,EAAE,MAAe,CAAC;AAEpC,eAAO,MAAM,UAAU,WAAY,OAAO,SAAS,aAAa,WAAW,OAAO,UAAU,OAAO,cAAc,MAAM,WAAgR,CAAC;AAI1Y,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA6B9C,QAAA,MAAM,SAAS;;;;;;gBADuJ,MAAM,GAAG,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CACnH,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}

package/dist/spinner/Spinner.svelte

@@ -37,7 +37,7 @@ let fillColorClass = color === undefined ? '' : fillColorClasses[color] ?? fillC
 @prop export let color: 'primary' | 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white' | 'custom' | undefined = 'primary';
 @prop export let bg: string = 'text-gray-300';
 @prop export let customColor: string = '';
-@prop export let size: string = '8';
+@prop export let size: string | number = '8';
 @prop export let currentFill: string = 'currentFill';
 @prop export let currentColor: string = 'currentColor';
 -->

package/dist/spinner/Spinner.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         color?: 'primary' | 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white' | 'custom' | undefined;
         bg?: string | undefined;
         customColor?: string | undefined;
-        size?: string | undefined;
+        size?: string | number | undefined;
         currentFill?: string | undefined;
         currentColor?: string | undefined;
     };
@@ -23,7 +23,7 @@ export type SpinnerSlots = typeof __propDef.slots;
  * @prop export let color: 'primary' | 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white' | 'custom' | undefined = 'primary';
  * @prop export let bg: string = 'text-gray-300';
  * @prop export let customColor: string = '';
- * @prop export let size: string = '8';
+ * @prop export let size: string | number = '8';
  * @prop export let currentFill: string = 'currentFill';
  * @prop export let currentColor: string = 'currentColor';
  */

package/dist/typography/P.svelte

@@ -62,12 +62,12 @@ const whitespaces = {
     preline: 'whitespace-pre-line',
     prewrap: 'whitespace-pre-wrap'
 };
-let colorAndopacity = color
+$: colorAndopacity = color
     .split(' ')
     .map((element) => element.trim())
     .map((element) => element + '/' + String(opacity))
     .join(' ');
-let classP = twMerge(size && sizes[size], (opacity && colorAndopacity) || (color && color), height && heights[height], weight && weights[weight], space && spaces[space], align && aligns[align], justify && 'text-justify', italic && 'italic', firstupper && upperClass, whitespace && whitespaces[whitespace], $$props.class);
+$: classP = twMerge(size && sizes[size], (opacity && colorAndopacity) || (color && color), height && heights[height], weight && weights[weight], space && spaces[space], align && aligns[align], justify && 'text-justify', italic && 'italic', firstupper && upperClass, whitespace && whitespaces[whitespace], $$props.class);
 </script>
 
 <p {...$$restProps} class={classP}>

package/dist/utils/focusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focusTrap.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/focusTrap.js"],"names":[],"mappings":";AA0Cu1rC,oJAAsM"}
+{"version":3,"file":"focusTrap.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/focusTrap.js"],"names":[],"mappings":";AA0Ci8rC,oJAAsM"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.44.22",
+  "version": "0.44.23",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -33,14 +33,14 @@
   },
   "devDependencies": {
     "@docsearch/js": "^3.5.2",
-    "@playwright/test": "^1.40.1",
-    "@sveltejs/adapter-vercel": "^4.0.4",
-    "@sveltejs/kit": "^2.3.2",
+    "@playwright/test": "^1.41.2",
+    "@sveltejs/adapter-vercel": "^4.0.5",
+    "@sveltejs/kit": "^2.5.0",
     "@sveltejs/package": "2.2.2",
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
-    "autoprefixer": "^10.4.16",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "autoprefixer": "^10.4.17",
     "esbuild": "0.19.5",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
@@ -48,15 +48,15 @@
     "flowbite-svelte-icons": "^0.4.5",
     "mdsvex": "^0.11.0",
     "mdsvexamples": "^0.4.1",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.35",
     "postcss-load-config": "^4.0.2",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.1.2",
     "prism-themes": "^1.9.0",
     "publint": "^0.2.7",
-    "svelte": "^4.2.8",
+    "svelte": "^4.2.10",
     "svelte-check": "^3.6.3",
-    "svelte-lib-helpers": "^0.3.15",
+    "svelte-lib-helpers": "^0.3.17",
     "svelte-meta-tags": "^3.1.0",
     "svelte-preprocess": "^5.1.3",
     "svelte2tsx": "^0.7.0",
@@ -64,7 +64,7 @@
     "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "vite": "^5.0.11",
+    "vite": "^5.0.12",
     "vitest": "^0.34.6"
   },
   "peerDependencies": {
@@ -114,13 +114,13 @@
     "url": "https://github.com/themesberg/flowbite-svelte"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.5.4",
-    "apexcharts": "^3.45.1",
+    "@floating-ui/dom": "^1.6.1",
+    "apexcharts": "^3.45.2",
     "flowbite": "^2.2.1",
-    "tailwind-merge": "^2.2.0"
+    "tailwind-merge": "^2.2.1"
   },
   "engines": {
-    "npm": ">=7.0.0",
+    "pnpm": ">=8.0.0",
     "node": ">=18.0.0"
   },
   "files": [