flowbite-svelte 0.45.1 → 0.46.0

package/dist/buttons/Button.svelte

@@ -10,6 +10,7 @@ export let color = group ? (outline ? 'dark' : 'alternative') : 'primary';
 export let shadow = false;
 export let tag = 'button';
 export let checked = undefined;
+export let disabled = false;
 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 dark:hover:bg-gray-700',
     blue: 'text-white bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700',
@@ -82,7 +83,7 @@ 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-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}
+{#if href && !disabled}
   <a {href} {...$$restProps} class={buttonClass} role="button" on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
     <slot />
   </a>
@@ -109,4 +110,5 @@ $: buttonClass = twMerge('text-center font-medium', group ? 'focus-within:ring-2
 @prop export let shadow: boolean = false;
 @prop export let tag: string = 'button';
 @prop export let checked: boolean | undefined = undefined;
+@prop export let disabled: boolean = false;
 -->

package/dist/buttons/Button.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         shadow?: boolean | undefined;
         tag?: string | undefined;
         checked?: boolean | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         click: MouseEvent;
@@ -45,6 +46,7 @@ export type ButtonSlots = typeof __propDef.slots;
  * @prop export let shadow: boolean = false;
  * @prop export let tag: string = 'button';
  * @prop export let checked: boolean | undefined = undefined;
+ * @prop export let disabled: boolean = false;
  */
 export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
 }

package/dist/buttons/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/buttons/Button.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAID,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AA2I5D,QAAA,MAAM,SAAS;;;;;;eAD6N,MAAM,GAAG,SAAS;eAAS,oBAAoB,CAAC,MAAM,CAAC;;;;kBAAiE,OAAO,GAAG,SAAS;;;;;;;;;;;;;;;;;;CACzS,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/buttons/Button.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAID,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AA4I5D,QAAA,MAAM,SAAS;;;;;;eADkP,MAAM,GAAG,SAAS;eAAS,oBAAoB,CAAC,MAAM,CAAC;;;;kBAAiE,OAAO,GAAG,SAAS;;;;;;;;;;;;;;;;;;;CAC9T,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}

package/dist/rating/RatingComment.svelte

@@ -46,7 +46,7 @@ let grayStars = comment.total - roundedRating;
     {#if helpfullink || abuselink}
       <div class="flex items-center mt-3 space-x-3 rtl:space-x-reverse divide-x rtl:divide-x-reverse divide-gray-200 dark:divide-gray-600">
         {#if helpfullink}
-          <Button size="xs" href="/" color="dark">Helpful</Button>
+          <Button size="xs" href={helpfullink} color="dark">Helpful</Button>
         {/if}
         {#if abuselink}
           <a href={abuselink} class="ps-4 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500"> Report abuse </a>

package/dist/tabs/Tabs.svelte

@@ -3,7 +3,7 @@
 
 <script>import { twMerge } from 'tailwind-merge';
 import { setContext } from 'svelte';
-export let style = 'none';
+export let tabStyle = 'none';
 export let defaultClass = 'flex flex-wrap space-x-2 rtl:space-x-reverse';
 export let contentClass = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
 export let divider = true;
@@ -23,11 +23,11 @@ const styledInactiveClasses = {
     none: ''
 };
 const ctx = {
-    activeClasses: styledActiveClasses[style] || activeClasses,
-    inactiveClasses: styledInactiveClasses[style] || inactiveClasses,
+    activeClasses: styledActiveClasses[tabStyle] || activeClasses,
+    inactiveClasses: styledInactiveClasses[tabStyle] || inactiveClasses,
     selected: writable()
 };
-$: divider = ['full', 'pill'].includes(style) ? false : divider;
+$: divider = ['full', 'pill'].includes(tabStyle) ? false : divider;
 setContext('ctx', ctx);
 function init(node) {
     const destroy = ctx.selected.subscribe((x) => {
@@ -36,11 +36,11 @@ function init(node) {
     });
     return { destroy };
 }
-$: ulClass = twMerge(defaultClass, style === 'underline' && '-mb-px', $$props.class);
+$: ulClass = twMerge(defaultClass, tabStyle === 'underline' && '-mb-px', $$props.class);
 </script>
 
 <ul class={ulClass}>
-  <slot {style} />
+  <slot {tabStyle} />
 </ul>
 {#if divider}
   <slot name="divider">
@@ -53,7 +53,7 @@ $: ulClass = twMerge(defaultClass, style === 'underline' && '-mb-px', $$props.cl
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let style: 'full' | 'pill' | 'underline' | 'none' = 'none';
+@prop export let tabStyle: 'full' | 'pill' | 'underline' | 'none' = 'none';
 @prop export let defaultClass: string = 'flex flex-wrap space-x-2 rtl:space-x-reverse';
 @prop export let contentClass: string = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
 @prop export let divider: boolean = true;

package/dist/tabs/Tabs.svelte.d.ts

@@ -8,7 +8,7 @@ export interface TabCtxType {
 declare const __propDef: {
     props: {
         [x: string]: any;
-        style?: "none" | "pill" | "underline" | "full" | undefined;
+        tabStyle?: "none" | "pill" | "underline" | "full" | undefined;
         defaultClass?: string | undefined;
         contentClass?: string | undefined;
         divider?: boolean | undefined;
@@ -20,7 +20,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            style: "none" | "pill" | "underline" | "full";
+            tabStyle: "none" | "pill" | "underline" | "full";
         };
         divider: {};
     };
@@ -31,7 +31,7 @@ export type TabsSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let style: 'full' | 'pill' | 'underline' | 'none' = 'none';
+ * @prop export let tabStyle: 'full' | 'pill' | 'underline' | 'none' = 'none';
  * @prop export let defaultClass: string = 'flex flex-wrap space-x-2 rtl:space-x-reverse';
  * @prop export let contentClass: string = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4';
  * @prop export let divider: boolean = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.45.1",
+  "version": "0.46.0",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "packageManager": "pnpm@8.15.4",
@@ -14,6 +14,7 @@
   "license": "MIT",
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
+    "@docsearch/css": "3",
     "@docsearch/js": "^3.6.0",
     "@playwright/test": "^1.43.1",
     "@sveltejs/adapter-vercel": "^5.3.0",