flowbite-svelte 0.29.13 → 0.30.3

package/{navbar → dist/navbar}/Navbar.svelte

@@ -2,7 +2,7 @@
 import classNames from 'classnames';
 export let navClass = 'px-2 sm:px-4 py-2.5 w-full';
 export let navDivClass = 'mx-auto flex flex-wrap justify-between items-center ';
-export let fluid = true;
+export let fluid = false;
 export let color = 'navbar';
 let hidden = true;
 let toggle = () => {
@@ -11,7 +11,7 @@ let toggle = () => {
 </script>
 
 <Frame tag="nav" {color} {...$$restProps} class={classNames(navClass, $$props.class)}>
-  <div class={classNames(navDivClass, fluid && 'container')}>
+  <div class={classNames(navDivClass, fluid || 'container')}>
     <slot {hidden} {toggle} />
   </div>
 </Frame>

package/{tables → dist/tables}/TableHeadCell.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        [x: string]: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/toolbar/Toolbar.svelte

@@ -0,0 +1,32 @@
+<script>import { setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import classNames from 'classnames';
+import Frame from '../utils/Frame.svelte';
+const separators = writable(false);
+setContext('toolbar', separators);
+export let color = 'dark';
+export let embedded = false;
+let divClass;
+$: divClass = classNames('flex justify-between items-center', embedded || 'p-2', $$props.class);
+const divideColors = {
+    gray: 'divide-gray-400 dark:divide-gray-700',
+    red: 'divide-red-400 dark:divide-red-700',
+    yellow: 'divide-yellow-400 dark:divide-yellow-700',
+    green: 'divide-green-400 dark:divide-green-700',
+    indigo: 'divide-indigo-400 dark:divide-indigo-700',
+    purple: 'divide-purple-400 dark:divide-purple-700',
+    pink: 'divide-pink-400 dark:divide-pink-700',
+    blue: 'divide-blue-400 dark:divide-blue-700',
+    dark: 'divide-gray-400 dark:divide-gray-600',
+    none: ''
+};
+let separatorsClass;
+$: separatorsClass = classNames($separators && 'sm:divide-x', divideColors[color]);
+</script>
+
+<Frame class={divClass} color={embedded ? 'none' : color} rounded={!embedded}>
+  <div class="flex flex-wrap items-center {separatorsClass}">
+    <slot />
+  </div>
+  <slot name="end" />
+</Frame>

package/{toolbar → dist/toolbar}/Toolbar.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "dark" | undefined;
+        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "dark" | "none" | undefined;
         embedded?: boolean | undefined;
     };
     events: {

package/dist/toolbar/ToolbarButton.svelte

@@ -0,0 +1,38 @@
+<script>import { getContext } from 'svelte';
+import classNames from 'classnames';
+const background = getContext('background');
+export let color = 'default';
+export let name = undefined;
+export let ariaLabel = undefined;
+export let size = 'md';
+const colors = {
+    dark: 'text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700',
+    gray: 'text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700',
+    red: 'text-red-500 focus:ring-red-400 hover:bg-red-200 dark:hover:bg-gray-700',
+    yellow: 'text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-gray-700',
+    green: 'text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:bg-gray-700',
+    indigo: 'text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-gray-700',
+    purple: 'text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-gray-700',
+    pink: 'text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-gray-700',
+    blue: 'text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-gray-700',
+    default: 'focus:ring-gray-400 '
+};
+const sizing = {
+    xs: 'm-0.5 rounded focus:ring-1 p-0.5',
+    sm: 'm-0.5 rounded focus:ring-1 p-0.5',
+    md: 'rounded-lg focus:ring-2 p-1.5'
+};
+let buttonClass;
+$: buttonClass = classNames('focus:outline-none whitespace-normal', sizing[size], colors[color], color === 'default' &&
+    (background ? 'hover:bg-gray-100 dark:hover:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-700'), $$props.class);
+const svgSizes = {
+    xs: 'w-3 h-3',
+    sm: 'w-3.5 h-3.5',
+    md: 'w-5 h-5'
+};
+</script>
+
+<button on:click type="button" {...$$restProps} class={buttonClass} aria-label={ariaLabel ?? name}>
+  {#if name}<span class="sr-only">{name}</span>{/if}
+  <slot svgSize={svgSizes[size]} />
+</button>

package/{toolbar → dist/toolbar}/ToolbarButton.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "default" | "purple" | "pink" | "blue" | undefined;
+        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "default" | "purple" | "pink" | "blue" | "dark" | undefined;
         name?: string | undefined;
         ariaLabel?: string | undefined;
         size?: "xs" | "sm" | "md" | undefined;
@@ -13,7 +13,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            svgSize: string;
+        };
     };
 };
 export type ToolbarButtonProps = typeof __propDef.props;