flowbite-svelte 0.24.6 → 0.24.9

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.24.9](https://github.com/themesberg/flowbite-svelte/compare/v0.24.8...v0.24.9) (2022-08-15)
+
+
+### Features
+
+* button group ([bb95b98](https://github.com/themesberg/flowbite-svelte/commit/bb95b98c0e4b70f3958c778ac2dc8367c67df8d7))
+
+
+### Bug Fixes
+
+* dropdown open/close api ([d2aa6f7](https://github.com/themesberg/flowbite-svelte/commit/d2aa6f71e7e804d474eb46e58030097d9bd9962f))
+* dropdown open/close api - docs ([f299c28](https://github.com/themesberg/flowbite-svelte/commit/f299c284a4ef3c9539e17677b815f60dd8d1e6f2))
+* no href on <a> buttons ([ab13df8](https://github.com/themesberg/flowbite-svelte/commit/ab13df85aeac5368383bb708c9cb3146e418066f))
+* window is undefined ([b752882](https://github.com/themesberg/flowbite-svelte/commit/b752882ad0f0f6a7c196223649463903453f48d6))
+* window is undefined/2 ([4c0ca77](https://github.com/themesberg/flowbite-svelte/commit/4c0ca77eddfae2a04d10bc1ea3dc53671864b181))
+
+### [0.24.8](https://github.com/themesberg/flowbite-svelte/compare/v0.24.7...v0.24.8) (2022-08-12)
+
+
+### Bug Fixes
+
+* change function clickOutside to arrow function ([71e71e0](https://github.com/themesberg/flowbite-svelte/commit/71e71e0e482ad9939f9d135b1608b5cc8d31d899))
+* update createprops and update props ([0739b92](https://github.com/themesberg/flowbite-svelte/commit/0739b9296caddcba85f849b222e6548a961dbd34))
+
+### [0.24.7](https://github.com/themesberg/flowbite-svelte/compare/v0.24.5...v0.24.7) (2022-08-11)
+
+
+### Features
+
+* add Review component ([67af517](https://github.com/themesberg/flowbite-svelte/commit/67af517e32dfc19c6079e5d1925a234f0162cc34))
+* add Review component ([d41b11d](https://github.com/themesberg/flowbite-svelte/commit/d41b11d4ef00d1d6d0d824d4fcdc9c964a78a7d2))
+* add Review component, page, and prop ([4446e1e](https://github.com/themesberg/flowbite-svelte/commit/4446e1eba3706e291f0cb3812b4ffb61df48eb46))
+
 ### [0.24.6](https://github.com/themesberg/flowbite-svelte/compare/v0.24.5...v0.24.6) (2022-08-11)
 
 

package/accordions/AccordionFlush.svelte

@@ -5,6 +5,8 @@ import { ChevronDown, ChevronUp } from 'svelte-heros';
 export let id = '';
 export let btnClass = 'flex justify-between items-center py-5 w-full font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400';
 export let slotClass = 'py-5 border-b border-gray-200 dark:border-gray-700';
+export let iconSize = 24;
+export let iconClass = 'text-gray-500 sm:w-6 sm:h-6 dark:text-gray-300';
 export let isOpen = false;
 export let icons = {
     up: ChevronUp,
@@ -18,8 +20,6 @@ onMount(() => {
 const handleToggle = (id) => {
     isOpen = !isOpen;
 };
-export let iconSize = 24;
-export let iconClass = 'text-gray-500 sm:w-6 sm:h-6 dark:text-gray-300';
 </script>
 
 <h2 aria-expanded={isOpen}>

package/accordions/AccordionFlush.svelte.d.ts

@@ -6,10 +6,10 @@ declare const __propDef: {
         id?: string;
         btnClass?: string;
         slotClass?: string;
-        isOpen?: boolean;
-        icons?: AccordionIconType;
         iconSize?: number;
         iconClass?: string;
+        isOpen?: boolean;
+        icons?: AccordionIconType;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/buttongroups/ButtonGroup.svelte

@@ -1,5 +1,8 @@
-<script>import classNames from 'classnames';
-export let divClass = 'inline-flex rounded-md shadow-sm';
+<script>import { setContext } from 'svelte';
+import classNames from 'classnames';
+export let divClass = 'inline-flex rounded-lg shadow-sm';
+setContext('group', true);
+setContext('background', true);
 </script>
 
 <div {...$$restProps} class={classNames(divClass, $$props.class)} role="group">

package/buttons/Button.svelte

@@ -1,18 +1,20 @@
 <script>import classNames from 'classnames';
 import { getContext } from 'svelte';
+const group = getContext('group');
 export let pill = false;
 export let outline = false;
 export let gradient = false;
-export let size = 'md';
+export let size = group ? 'sm' : 'md';
 export let href = undefined;
 export let btnClass = undefined;
-export let color = 'blue';
+export let type = 'button';
+export let color = group ? (outline ? 'dark' : 'alternative') : 'blue';
 export let shadow = null;
 const background = getContext('background');
 const colorClasses = {
     blue: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800',
-    dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700',
-    alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700',
+    dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700',
+    alternative: 'text-gray-900 bg-white border border-gray-200 dark:border-gray-600 hover:bg-gray-100 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700',
     light: 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700',
     green: 'text-white bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800',
     red: 'text-white bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900',
@@ -48,7 +50,7 @@ const coloredShadowClasses = {
 };
 const outlineClasses = {
     blue: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800',
-    dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800',
+    dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800',
     green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800',
     red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900',
     yellow: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900',
@@ -56,11 +58,22 @@ const outlineClasses = {
 };
 const sizeClasses = {
     xs: 'px-3 py-2 text-xs',
-    sm: 'px-3 py-2 text-sm',
+    sm: 'px-4 py-2 text-sm',
     md: 'px-5 py-2.5 text-sm',
     lg: 'px-5 py-3 text-base',
     xl: 'px-6 py-3.5 text-base'
 };
+function rounded(gradientOutline = false) {
+    if (group) {
+        return pill
+            ? 'first:rounded-l-full last:rounded-r-full'
+            : gradientOutline
+                ? 'first:rounded-l-md last:rounded-r-md'
+                : 'first:rounded-l-lg last:rounded-r-lg';
+    }
+    return pill ? 'rounded-full' : gradientOutline ? 'rounded-md' : 'rounded-lg';
+}
+const hasBorder = () => outline || color === 'alternative' || color === 'light';
 let buttonClass;
 $: buttonClass = btnClass
     ? btnClass
@@ -68,16 +81,21 @@ $: buttonClass = btnClass
         ? 'p-0.5'
         : 'inline-flex items-center justify-center ' + sizeClasses[size], gradient ? gradientClasses[color] : outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' &&
         (background
-            ? 'dark:bg-transparent dark:border-gray-700 dark:hover:border-gray-600'
-            : 'dark:bg-transparent dark:border-gray-800 dark:hover:border-gray-700'), pill ? 'rounded-full' : 'rounded-lg', shadow && coloredShadowClasses[shadow], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
+            ? '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-800 dark:hover:border-gray-700'), outline &&
+        color === 'dark' &&
+        (background
+            ? 'dark:text-white dark:border-white'
+            : 'dark:text-gray-400 dark:border-gray-700'), hasBorder() && group && 'border-l-0 first:border-l', rounded(false), shadow && coloredShadowClasses[shadow], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
 let gradientOutlineClass;
-$: gradientOutlineClass = classNames('inline-flex items-center justify-center', sizeClasses[size], pill ? 'rounded-full' : 'rounded-md', 'bg-white text-gray-900 dark:bg-gray-900 dark:text-white', // this is limitation - no transparency
+$: gradientOutlineClass = classNames('inline-flex items-center justify-center', sizeClasses[size], rounded(true), 'bg-white text-gray-900 dark:bg-gray-900 dark:text-white', // this is limitation - no transparency
 'transition-all duration-75 ease-in group-hover:bg-opacity-0 group-hover:text-inherit');
 </script>
 
 <svelte:element
 	this={href ? 'a' : 'button'}
-	type={href ? undefined : 'button'}
+	type={href ? undefined : type}
+	{href}
 	{...$$restProps}
 	class={buttonClass}
 	on:click

package/buttons/Button.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import type { ButtonType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -8,6 +9,7 @@ declare const __propDef: {
         size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
         href?: string;
         btnClass?: string;
+        type?: ButtonType;
         color?: 'alternative' | 'blue' | 'cyan' | 'dark' | 'light' | 'lime' | 'green' | 'pink' | 'red' | 'teal' | 'yellow' | 'purple' | 'purpleToBlue' | 'cyanToBlue' | 'greenToBlue' | 'purpleToPink' | 'pinkToOrange' | 'tealToLime' | 'redToYellow';
         shadow?: 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple' | null;
     };

package/carousels/CarouselTransition.svelte

@@ -28,7 +28,7 @@ export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2
 // Indicator
 export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
 // have a custom transition function that returns the desired transition
-function multiple(node, params) {
+const multiple = (node, params) => {
     switch (transitionType) {
         case 'slide':
             return slide(node, params);
@@ -39,7 +39,7 @@ function multiple(node, params) {
         case 'fade':
             return fade(node, params);
     }
-}
+};
 // Slide
 // export let slideClass: string = 'hidden';
 let imageShowingIndex = 1;

package/dropdowns/Dropdown.svelte

@@ -9,6 +9,7 @@ export let tooltipArrow = false;
 export let arrowIcon = true;
 export let labelClass = 'flex items-center justify-between w-full py-2 pl-3 pr-4 font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent';
 export let placement = 'bottom';
+export let open = false;
 setContext('background', true);
 const icons = {
     top: ChevronUp,
@@ -27,6 +28,7 @@ $: icon = icons[placement.split('-')[0]];
 	{placement}
 	arrow={tooltipArrow}
 	trigger="click"
+	bind:open
 >
 	<slot name="trigger">
 		{#if inline}

package/dropdowns/Dropdown.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         arrowIcon?: boolean;
         labelClass?: string;
         placement?: 'auto' | Placement;
+        open?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/Iconinput.svelte

@@ -9,9 +9,9 @@ export let spanClass = 'inline-flex items-center px-3 text-sm text-gray-900 bg-g
 export let noBorderInputClass = 'bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10   dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
 export let noBorderDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
 export let iconClass = 'mr-2';
-function setType(node) {
+const setType = (node) => {
     node.type = type;
-}
+};
 </script>
 
 {#if noBorder}

package/forms/Input.svelte

@@ -13,9 +13,9 @@ const colorClasses = {
 // tinted if put in component having its own background
 let background = getContext('background');
 // you need to this to avoid 2-way binding
-function setType(node) {
+const setType = (node) => {
     node.type = type;
-}
+};
 </script>
 
 <input

package/index.d.ts

@@ -7,7 +7,6 @@ export { default as Breadcrumb } from './breadcrumbs/Breadcrumb.svelte';
 export { default as BreadcrumbItem } from './breadcrumbs/BreadcrumbItem.svelte';
 export { default as Button } from './buttons/Button.svelte';
 export { default as ButtonGroup } from './buttongroups/ButtonGroup.svelte';
-export { default as ButtonGroupItem } from './buttongroups/ButtonGroupItem.svelte';
 export { default as Card } from './cards/Card.svelte';
 export { default as Carousel } from './carousels/Carousel.svelte';
 export { default as CarouselTransition } from './carousels/CarouselTransition.svelte';

package/index.js

@@ -14,7 +14,6 @@ export { default as BreadcrumbItem } from './breadcrumbs/BreadcrumbItem.svelte';
 export { default as Button } from './buttons/Button.svelte';
 // Buttongroups
 export { default as ButtonGroup } from './buttongroups/ButtonGroup.svelte';
-export { default as ButtonGroupItem } from './buttongroups/ButtonGroupItem.svelte';
 // Cards
 export { default as Card } from './cards/Card.svelte';
 // Carousels

package/megamenu/MegaMenu.svelte

@@ -7,11 +7,11 @@ let wrapperClass;
 $: wrapperClass = classNames('border-gray-100 shadow-md dark:border-gray-700', full ? 'border-y' : 'rounded-lg border', full ? 'bg-white dark:bg-gray-800' : 'bg-white dark:bg-gray-700', $$props.class);
 let ulClass;
 $: ulClass = classNames('grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max', full && $$slots.extra ? 'grid-cols-2' : 'grid-cols-2 md:grid-cols-3', 'text-sm font-medium', 'text-gray-500 dark:text-gray-400', full && $$slots.extra && 'md:w-2/3');
-function init(node) {
+const init = (node) => {
     if (full) {
         node.parentElement.classList.add('inset-x-0');
     }
-}
+};
 </script>
 
 <div class={wrapperClass} use:init>

package/modals/Modal.svelte

@@ -18,7 +18,7 @@ const allPlacementClasses = [
     'items-end'
 ];
 let backdropEl;
-function init(node, _open) {
+const init = (node, _open) => {
     getPlacementClasses().map((c) => node.classList.add(c));
     _open && createBackdrop(node);
     return {
@@ -31,12 +31,12 @@ function init(node, _open) {
             destroyBackdrop(node);
         }
     };
-}
-function handleEscape(e) {
+};
+const handleEscape = (e) => {
     if (open && e.key === 'Escape')
         open = false;
-}
-function createBackdrop(node) {
+};
+const createBackdrop = (node) => {
     if (!backdropEl) {
         backdropEl = document.createElement('div');
         backdropEl.classList.add(...backdropClasses.split(' '));
@@ -46,8 +46,8 @@ function createBackdrop(node) {
         document.addEventListener('keydown', handleEscape, true);
     }
     dispatch('show', node);
-}
-function destroyBackdrop(node) {
+};
+const destroyBackdrop = (node) => {
     const body = document.querySelector('body');
     body.style.overflow = 'auto';
     if (backdropEl)
@@ -55,8 +55,8 @@ function destroyBackdrop(node) {
     backdropEl = undefined;
     document.removeEventListener('keydown', handleEscape, true);
     dispatch('hide', node);
-}
-function getPlacementClasses() {
+};
+const getPlacementClasses = () => {
     switch (placement) {
         // top
         case 'top-left':
@@ -82,7 +82,7 @@ function getPlacementClasses() {
         default:
             return ['justify-center', 'items-center'];
     }
-}
+};
 const sizes = {
     xs: 'max-w-md',
     sm: 'max-w-lg',
@@ -90,13 +90,13 @@ const sizes = {
     lg: 'max-w-4xl',
     xl: 'max-w-7xl'
 };
-function onButtonsClick({ target }) {
+const onButtonsClick = ({ target }) => {
     if (autoclose && target.tagName === 'BUTTON')
         open = !open;
-}
-function hide() {
+};
+const hide = () => {
     open = false;
-}
+};
 </script>
 
 <!-- Main modal -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.24.6",
+  "version": "0.24.9",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -12,33 +12,33 @@
   "homepage": "https://flowbite-svelte.com/",
   "license": "MIT",
   "devDependencies": {
-    "@playwright/test": "^1.23.4",
+    "@playwright/test": "^1.25.0",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
-    "@typescript-eslint/eslint-plugin": "^5.30.7",
-    "@typescript-eslint/parser": "^5.30.7",
-    "autoprefixer": "^10.4.4",
-    "createprops": "^0.4.4",
-    "eslint": "^8.20.0",
+    "@typescript-eslint/eslint-plugin": "^5.33.0",
+    "@typescript-eslint/parser": "^5.33.0",
+    "autoprefixer": "^10.4.8",
+    "createprops": "^0.4.9",
+    "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "mdsvex": "^0.10.6",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.16",
     "postcss-load-config": "3.1.4",
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
     "prism-themes": "^1.9.0",
-    "svelte": "^3.47.0",
+    "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
-    "svelte-flag-icons": "^0.1.0",
+    "svelte-flag-icons": "^0.1.1",
     "svelte-heros": "^2.3.3",
     "svelte-preprocess": "^4.10.7",
-    "svelte-sidebar-menu": "^0.8.4",
-    "svelte2tsx": "^0.5.11",
-    "tailwindcss": "^3.1.6",
-    "tslib": "^2.3.1",
+    "svelte-sidebar-menu": "^0.8.11",
+    "svelte2tsx": "^0.5.13",
+    "tailwindcss": "^3.1.8",
+    "tslib": "^2.4.0",
     "typescript": "~4.7.4",
-    "vite": "^3.0.2"
+    "vite": "^3.0.7"
   },
   "type": "module",
   "keywords": [
@@ -81,9 +81,9 @@
     "url": "https://github.com/themesberg/flowbite-svelte"
   },
   "dependencies": {
-    "@floating-ui/dom": "^0.5.3",
+    "@floating-ui/dom": "^0.5.4",
     "classnames": "^2.3.1",
-    "flowbite": "^1.4.2"
+    "flowbite": "^1.5.2"
   },
   "engines": {
     "npm": ">=7.0.0",
@@ -108,7 +108,6 @@
     "./breadcrumbs/Breadcrumb.svelte": "./breadcrumbs/Breadcrumb.svelte",
     "./breadcrumbs/BreadcrumbItem.svelte": "./breadcrumbs/BreadcrumbItem.svelte",
     "./buttongroups/ButtonGroup.svelte": "./buttongroups/ButtonGroup.svelte",
-    "./buttongroups/ButtonGroupItem.svelte": "./buttongroups/ButtonGroupItem.svelte",
     "./buttons/Button.svelte": "./buttons/Button.svelte",
     "./cards/Card.svelte": "./cards/Card.svelte",
     "./carousels/Caption.svelte": "./carousels/Caption.svelte",

package/paginations/TableData.svelte

@@ -1,7 +1,7 @@
 <script>import { createEventDispatcher } from 'svelte';
-export let helper = undefined;
 export let btnPreClass = 'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-l hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
 export let btnNextClass = 'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-r border-0 border-l border-gray-700 hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+export let helper = undefined;
 const dispatch = createEventDispatcher();
 const previous = () => {
     dispatch('previous');

package/paginations/TableData.svelte.d.ts

@@ -1,13 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { TableDataHelperType } from '../types';
 declare const __propDef: {
     props: {
-        helper?: {
-            start: number;
-            end: number;
-            total: number;
-        } | undefined;
         btnPreClass?: string;
         btnNextClass?: string;
+        helper?: TableDataHelperType | undefined;
     };
     events: {
         blur: FocusEvent;

package/ratings/Review.svelte

@@ -1,47 +1,43 @@
 <script>import classNames from 'classnames';
 export let review;
+export let articleClass = 'md:gap-8 md:grid md:grid-cols-3';
+export let divClass = 'flex items-center mb-6 space-x-4';
+export let imgClass = 'w-10 h-10 rounded-full';
+export let ulClass = 'space-y-4 text-sm text-gray-500 dark:text-gray-400';
+export let liClass = 'flex items-center';
 </script>
 
-<article class="md:gap-8 md:grid md:grid-cols-3">
+<article class={classNames(articleClass, $$props.classArticle)}>
 	<div>
-		<div class="flex items-center mb-6 space-x-4">
-			<img class="w-10 h-10 rounded-full" src={review.imgSrc} alt={review.imgAlt} />
+		<div class={classNames(divClass, $$props.classDiv)}>
+			<img class={classNames(imgClass, $$props.classImg)} src={review.imgSrc} alt={review.imgAlt} />
 			<div class="space-y-1 font-medium dark:text-white">
 				<p>{review.name}</p>
 				{#if review.address}
 					<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
 						{#if review.addressIcon}
-							<svelte:component this={review.addressIcon} />
+							<svelte:component this={review.addressIcon} size="16" class="mr-2" />
 						{/if}
 						{review.address}
 					</div>
 				{/if}
 			</div>
 		</div>
-		{#if review.item || review.option1 || review.option2}
-			<ul class="space-y-4 text-sm text-gray-500 dark:text-gray-400">
-				{#if review.item}
-					<li class="flex items-center">
-						{#if review.itemIcon}
-							<svelte:component this={review.addressIcon} />
-						{/if}
-						{review.item}
+		{#if $$slots.item || $$slots.option1 || $$slots.option2}
+			<ul class={classNames(ulClass, $$props.classUl)}>
+				{#if $$slots.item}
+					<li class={classNames(liClass, $$props.classLi)}>
+						<slot name="item" />
 					</li>
 				{/if}
-				{#if review.option1}
-					<li class="flex items-center">
-						{#if review.option1Icon}
-							<svelte:component this={review.option1Icon} />
-						{/if}
-						{review.option1}
+				{#if $$slots.option1}
+					<li class={classNames(liClass, $$props.classLi)}>
+						<slot name="option1" />
 					</li>
 				{/if}
-				{#if review.option2}
-					<li class="flex items-center">
-						{#if review.option2Icon}
-							<svelte:component this={review.option2Icon} />
-						{/if}
-						{review.option2}
+				{#if $$slots.option2}
+					<li class={classNames(liClass, $$props.classLi)}>
+						<slot name="option2" />
 					</li>
 				{/if}
 			</ul>
@@ -50,10 +46,10 @@ export let review;
 	<div class="col-span-2 mt-6 md:mt-0">
 		<div class="flex items-start mb-5">
 			<div class="pr-4">
-				{#if review.date}
+				{#if review.reviewDate}
 					<footer>
 						<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
-							Reviewed: {review.date}
+							Reviewed: {review.reviewDate}
 						</p>
 					</footer>
 				{/if}

package/ratings/Review.svelte.d.ts

@@ -1,28 +1,22 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SvelteComponent } from 'svelte';
+import type { ReviewType } from '../types';
 declare const __propDef: {
     props: {
-        review: {
-            name: string;
-            imgSrc: string;
-            imgAlt: string;
-            address: string;
-            addressIcon: typeof SvelteComponent;
-            reviewDate: string;
-            title: string;
-            rating: number;
-            item: string;
-            itemIcon: typeof SvelteComponent;
-            option1: string;
-            option1Icon: typeof SvelteComponent;
-            option2: string;
-            option2Icon: typeof SvelteComponent;
-        };
+        [x: string]: any;
+        review: ReviewType;
+        articleClass?: string;
+        divClass?: string;
+        imgClass?: string;
+        ulClass?: string;
+        liClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        item: {};
+        option1: {};
+        option2: {};
         default: {};
     };
 };

package/tooltips/Tooltip.svelte

@@ -10,6 +10,7 @@ export let animation = 'duration-300';
 export let arrow = true;
 export let tipClass = 'absolute inline-block rounded-lg py-2 px-3 text-sm font-medium shadow-sm';
 export let tipColor = '';
+export let open = false;
 const tipStyleClasses = {
     dark: 'bg-gray-900 text-white dark:bg-gray-700',
     light: 'border border-gray-200 bg-white text-gray-900',
@@ -24,7 +25,6 @@ const arrowStyleClasses = {
 };
 let toolTipClass;
 $: toolTipClass = classNames(tipClass, animation !== false && `transition-opacity ${animation}`, !open && 'invisible opacity-0', tipStyleClasses[style], $$props.class);
-let open = false;
 const floatingPlacement = (placement) => {
     return placement === 'auto' ? undefined : placement;
 };
@@ -47,13 +47,15 @@ const updatePosition = () => computePosition(triggerRef, tooltipRef, {
 let attachedScroll = false;
 $: tooltipRef && open && updatePosition();
 $: {
-    if (open && !attachedScroll) {
-        attachedScroll = true;
-        window.addEventListener('scroll', updatePosition, true);
-    }
-    else if (!open && attachedScroll) {
-        attachedScroll = false;
-        window.removeEventListener('scroll', updatePosition, true);
+    if (tooltipRef && triggerRef) {
+        if (open && !attachedScroll) {
+            attachedScroll = true;
+            window.addEventListener('scroll', updatePosition, true);
+        }
+        else if (!open && attachedScroll) {
+            attachedScroll = false;
+            window.removeEventListener('scroll', updatePosition, true);
+        }
     }
 }
 onDestroy(() => {

package/tooltips/Tooltip.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         arrow?: boolean;
         tipClass?: string;
         tipColor?: string;
+        open?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/types.d.ts

@@ -148,6 +148,22 @@ export interface PillTabType {
     selected: boolean;
     href: string;
 }
+export declare type ReviewType = {
+    name: string;
+    imgSrc: string;
+    imgAlt: string;
+    address: string | undefined;
+    addressIcon: typeof SvelteComponent | undefined;
+    reviewDate: string | undefined;
+    title: string;
+    rating: number;
+    item: string | undefined;
+    itemIcon: typeof SvelteComponent | undefined;
+    option1: string | undefined;
+    option1Icon: typeof SvelteComponent | undefined;
+    option2: string | undefined;
+    option2Icon: typeof SvelteComponent | undefined;
+};
 export declare type SelectOptionType = {
     name: string;
     value: string;
@@ -193,6 +209,11 @@ export interface TabType {
     href: string;
     rel?: string;
 }
+export interface TableDataHelperType {
+    start: number;
+    end: number;
+    total: number;
+}
 export declare type Textsize = 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'text-2xl' | 'text-3xl' | 'text-4xl';
 export interface TimelineItemType {
     date: Date | string;

package/utils/clickOutside.d.ts

@@ -1,3 +1,3 @@
-export declare function clickOutside(node: HTMLElement, callback: () => void): {
+export declare const clickOutside: (node: HTMLElement, callback: () => void) => {
     destroy(): void;
 };

package/utils/clickOutside.js

@@ -1,4 +1,4 @@
-export function clickOutside(node, callback) {
+export const clickOutside = (node, callback) => {
     const handleClick = (event) => {
         if (!event?.target)
             return;
@@ -12,4 +12,4 @@ export function clickOutside(node, callback) {
             document.removeEventListener('click', handleClick, true);
         },
     };
-}
+};

package/buttongroups/ButtonGroupItem.svelte

@@ -1,40 +0,0 @@
-<script>import classNames from 'classnames';
-export let type = 'button';
-export let btnClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white first:rounded-l-lg border-t border-b last:rounded-r-md border-l last:border-r border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white';
-export let outlineClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent first:rounded-l-lg border-t border-b  last:rounded-r-md border-l last:border-r border-gray-900 hover:bg-gray-900 hover:text-white focus:z-10 focus:ring-2 focus:ring-gray-500 focus:bg-gray-900 focus:text-white dark:border-white dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:bg-gray-700';
-export let outline = false;
-export let href = '';
-if (outline) {
-    btnClass = outlineClass;
-}
-</script>
-
-{#if href}
-	<a
-		{href}
-		{...$$restProps}
-		class={classNames(btnClass, $$props.class)}
-		on:click
-		on:change
-		on:keydown
-		on:keyup
-		on:mouseenter
-		on:mouseleave><slot /></a
-	>
-{:else}
-	<button
-		{type}
-		{...$$restProps}
-		class={classNames(btnClass, $$props.class)}
-		on:click
-		on:change
-		on:keydown
-		on:keyup
-		on:focus
-		on:blur
-		on:mouseenter
-		on:mouseleave
-	>
-		<slot />
-	</button>
-{/if}

package/buttongroups/ButtonGroupItem.svelte.d.ts

@@ -1,33 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { ButtonType } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        type?: ButtonType;
-        btnClass?: string;
-        outlineClass?: string;
-        outline?: boolean;
-        href?: string;
-    };
-    events: {
-        click: MouseEvent;
-        change: Event;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type ButtonGroupItemProps = typeof __propDef.props;
-export declare type ButtonGroupItemEvents = typeof __propDef.events;
-export declare type ButtonGroupItemSlots = typeof __propDef.slots;
-export default class ButtonGroupItem extends SvelteComponentTyped<ButtonGroupItemProps, ButtonGroupItemEvents, ButtonGroupItemSlots> {
-}
-export {};