flowbite-svelte 0.25.7 → 0.25.10

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 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.25.10](https://github.com/themesberg/flowbite-svelte/compare/v0.25.9...v0.25.10) (2022-08-22)
+
+
+### Bug Fixes
+
+* buttons fine tuning ([353f631](https://github.com/themesberg/flowbite-svelte/commit/353f6312557fbef802e4e0b61d3638ab4190d2e3))
+* buttons fine tuning ([9f4c927](https://github.com/themesberg/flowbite-svelte/commit/9f4c927fb8303e7e65163ecd6413cdb834d1a4f3))
+
+### [0.25.9](https://github.com/themesberg/flowbite-svelte/compare/v0.25.8...v0.25.9) (2022-08-21)
+
+
+### Bug Fixes
+
+* docs for radio ([add38b2](https://github.com/themesberg/flowbite-svelte/commit/add38b26fd4669a591916b7fa42e107868cc90a1))
+* move @floating-ui/dom, classnames, svelte-heros, @popperjs/core from devDpendencies to dependencies ([ee5d31a](https://github.com/themesberg/flowbite-svelte/commit/ee5d31af1b23e00e565c2a60b354b85f2beb54d1))
+* popover html ([d49f808](https://github.com/themesberg/flowbite-svelte/commit/d49f808b8a05bd735a9f90c661710dddfd163cad))
+
+### [0.25.8](https://github.com/themesberg/flowbite-svelte/compare/v0.25.7...v0.25.8) (2022-08-21)
+
+
+### Features
+
+* add H1, H2, A, P, Higlight components ([3f80473](https://github.com/themesberg/flowbite-svelte/commit/3f804731e6a093c1e34f8b3be6289f930c372a96))
+* add Heading and removed H1 and H2 ([b2be994](https://github.com/themesberg/flowbite-svelte/commit/b2be9945c39bcbfe23a0df53348ce768c5958255))
+* add Mark and TextGradient ([343e719](https://github.com/themesberg/flowbite-svelte/commit/343e719406bc146639882f97bbeafbc2de9514cb))
+
 ### [0.25.7](https://github.com/themesberg/flowbite-svelte/compare/v0.25.6...v0.25.7) (2022-08-21)
 
 

package/badges/Badge.svelte

@@ -6,6 +6,7 @@ export let href = undefined;
 export let rounded = false;
 export let index = false;
 export let dismissable = false;
+export let baseClass = 'inline-flex items-center justify-center -mb-0.5';
 let hidden = false;
 const colors = {
     blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800',
@@ -36,7 +37,7 @@ const hovers = {
     pink: 'hover:bg-pink-200 dark:hover:bg-pink-300'
 };
 let badgeClass;
-$: badgeClass = classNames('inline-flex items-center justify-center -mb-0.5', large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color], href && (hovers[color] ?? hovers.blue), rounded ? 'rounded-full p-1' : 'rounded px-2.5 py-0.5', index && 'absolute font-bold border-2 border-white dark:border-gray-900', index && (large ? 'w-7 h-7 -top-3 -right-3' : 'w-6 h-6 -top-2 -right-2'), $$props.class);
+$: badgeClass = classNames(baseClass, large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color], href && (hovers[color] ?? hovers.blue), rounded ? 'rounded-full p-1' : 'rounded px-2.5 py-0.5', index && 'absolute font-bold border-2 border-white dark:border-gray-900', index && (large ? 'w-7 h-7 -top-3 -right-3' : 'w-6 h-6 -top-2 -right-2'), $$props.class);
 const handleHide = () => {
     hidden = !hidden;
 };

package/badges/Badge.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         rounded?: boolean;
         index?: boolean;
         dismissable?: boolean;
+        baseClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/breadcrumbs/Breadcrumb.svelte

@@ -3,7 +3,7 @@ export let navClass = 'flex';
 export let olClass = 'inline-flex items-center space-x-1 md:space-x-3';
 </script>
 
-<nav aria-label="Breadcrumb" {...$$restProps} class={classNames(navClass, $$props.classNav)}>
+<nav aria-label="Breadcrumb" {...$$restProps} class={classNames(navClass, $$props.class)}>
 	<ol class={classNames(olClass, $$props.classOl)}>
 		<slot />
 	</ol>

package/buttongroups/ButtonGroup.svelte

@@ -1,6 +1,6 @@
 <script>import { setContext } from 'svelte';
 import classNames from 'classnames';
-export let divClass = 'inline-flex rounded-lg shadow-sm';
+export let divClass = 'inline-flex rounded-lg shadow-sm w-fit';
 setContext('group', true);
 setContext('background', true);
 </script>

package/buttons/Button.svelte

@@ -14,7 +14,7 @@ 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',
-    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',
+    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 focus:text-blue-700 dark:focus:text-white 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',
@@ -50,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: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:bg-gray-900 focus:text-white 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',
@@ -77,7 +77,7 @@ const hasBorder = () => outline || color === 'alternative' || color === 'light';
 let buttonClass;
 $: buttonClass = btnClass
     ? btnClass
-    : classNames('group text-center font-medium focus:ring-4 focus:outline-none', outline && gradient
+    : classNames('group text-center font-medium', group ? 'focus:ring-2' : 'focus:ring-4', group && 'focus:z-10', !group || color === 'alternative' || (outline && color === 'dark') || 'focus:outline-none', outline && gradient
         ? 'p-0.5'
         : 'inline-flex items-center justify-center ' + sizeClasses[size], gradient ? gradientClasses[color] : outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' &&
         (background
@@ -86,7 +86,7 @@ $: buttonClass = btnClass
         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);
+            : 'dark:text-gray-400 dark:border-gray-700'), hasBorder() && group && 'border-l-0 border-r-0 first:border last:border', 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], 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');

package/index.d.ts

@@ -111,4 +111,12 @@ export { default as TimelineItemHorizontal } from './timelines/TimelineItemHoriz
 export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte';
 export { default as Toast } from './toasts/Toast.svelte';
 export { default as Tooltip } from './tooltips/Tooltip.svelte';
+export { default as A } from './typography/A.svelte';
+export { default as Heading } from './typography/Heading.svelte';
+export { default as Highlight } from './typography/Highlight.svelte';
+export { default as Mark } from './typography/Mark.svelte';
+export { default as P } from './typography/P.svelte';
+export { default as Secondary } from './typography/Secondary.svelte';
+export { default as TextGradient } from './typography/TextGradient.svelte';
+export { default as Underline } from './typography/Underline.svelte';
 export { default as CloseButton } from './utils/CloseButton.svelte';

package/index.js

@@ -143,5 +143,14 @@ export { default as TimelineItemVertical } from './timelines/TimelineItemVertica
 export { default as Toast } from './toasts/Toast.svelte';
 // Tooltips
 export { default as Tooltip } from './tooltips/Tooltip.svelte';
+// Typography
+export { default as A } from './typography/A.svelte';
+export { default as Heading } from './typography/Heading.svelte';
+export { default as Highlight } from './typography/Highlight.svelte';
+export { default as Mark } from './typography/Mark.svelte';
+export { default as P } from './typography/P.svelte';
+export { default as Secondary } from './typography/Secondary.svelte';
+export { default as TextGradient } from './typography/TextGradient.svelte';
+export { default as Underline } from './typography/Underline.svelte';
 // utils
 export { default as CloseButton } from './utils/CloseButton.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.25.7",
+  "version": "0.25.10",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -12,16 +12,13 @@
   "homepage": "https://flowbite-svelte.com/",
   "license": "MIT",
   "devDependencies": {
-    "@floating-ui/dom": "^1.0.1",
     "@playwright/test": "^1.25.0",
-    "@popperjs/core": "^2.11.6",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "1.0.0-next.420",
     "@sveltejs/package": "1.0.0-next.1",
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
     "autoprefixer": "^10.4.8",
-    "classnames": "^2.3.1",
     "createprops": "^0.4.9",
     "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
@@ -35,7 +32,6 @@
     "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
     "svelte-flag-icons": "^0.1.1",
-    "svelte-heros": "^2.3.3",
     "svelte-preprocess": "^4.10.7",
     "svelte-sidebar-menu": "^0.8.11",
     "svelte2tsx": "^0.5.13",
@@ -85,7 +81,11 @@
     "url": "https://github.com/themesberg/flowbite-svelte"
   },
   "dependencies": {
-    "flowbite": "^1.5.2"
+    "@floating-ui/dom": "^1.0.1",
+    "@popperjs/core": "^2.11.6",
+    "classnames": "^2.3.1",
+    "flowbite": "^1.5.2",
+    "svelte-heros": "^2.3.3"
   },
   "engines": {
     "npm": ">=7.0.0",
@@ -222,6 +222,14 @@
     "./toasts/Toast.svelte": "./toasts/Toast.svelte",
     "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
     "./types": "./types.js",
+    "./typography/A.svelte": "./typography/A.svelte",
+    "./typography/Heading.svelte": "./typography/Heading.svelte",
+    "./typography/Highlight.svelte": "./typography/Highlight.svelte",
+    "./typography/Mark.svelte": "./typography/Mark.svelte",
+    "./typography/P.svelte": "./typography/P.svelte",
+    "./typography/Secondary.svelte": "./typography/Secondary.svelte",
+    "./typography/TextGradient.svelte": "./typography/TextGradient.svelte",
+    "./typography/Underline.svelte": "./typography/Underline.svelte",
     "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
     "./utils/Popper.svelte": "./utils/Popper.svelte",
     "./utils/clickOutside": "./utils/clickOutside.js",

package/typography/A.svelte

@@ -0,0 +1,9 @@
+<script>import classNames from 'classnames';
+export let href = '#';
+export let textColor = 'text-blue-600 dark:text-blue-500';
+export let aClass = 'inline-flex items-center text-lg  hover:underline';
+</script>
+
+<a {href} class={classNames(aClass, textColor, $$props.class)}>
+	<slot />
+</a>

package/typography/A.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        href?: string;
+        textColor?: string;
+        aClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type AProps = typeof __propDef.props;
+export declare type AEvents = typeof __propDef.events;
+export declare type ASlots = typeof __propDef.slots;
+export default class A extends SvelteComponentTyped<AProps, AEvents, ASlots> {
+}
+export {};

package/typography/Heading.svelte

@@ -0,0 +1,20 @@
+<script>import classNames from 'classnames';
+export let tag = 'h1';
+export let textColor = 'text-gray-900 dark:text-white';
+export let customSize;
+const textSizes = {
+    h1: 'text-5xl font-extrabold',
+    h2: 'text-4xl font-bold',
+    h3: 'text-3xl font-bold',
+    h4: 'text-2xl font-bold',
+    h5: 'text-xl font-bold',
+    h6: 'text-lg font-bold'
+};
+</script>
+
+<svelte:element
+	this={tag}
+	class={classNames(customSize ? customSize : textSizes[tag], textColor, $$props.class)}
+>
+	<slot />
+</svelte:element>

package/typography/Heading.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+        textColor?: string;
+        customSize: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type HeadingProps = typeof __propDef.props;
+export declare type HeadingEvents = typeof __propDef.events;
+export declare type HeadingSlots = typeof __propDef.slots;
+export default class Heading extends SvelteComponentTyped<HeadingProps, HeadingEvents, HeadingSlots> {
+}
+export {};

package/typography/Highlight.svelte

@@ -0,0 +1,7 @@
+<script>import classNames from 'classnames';
+export let textColor = 'text-blue-600 dark:text-blue-500';
+</script>
+
+<span class={classNames(textColor, $$props.class)}>
+	<slot />
+</span>

package/typography/Highlight.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        textColor?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type HighlightProps = typeof __propDef.props;
+export declare type HighlightEvents = typeof __propDef.events;
+export declare type HighlightSlots = typeof __propDef.slots;
+export default class Highlight extends SvelteComponentTyped<HighlightProps, HighlightEvents, HighlightSlots> {
+}
+export {};

package/typography/Mark.svelte

@@ -0,0 +1,9 @@
+<script>import classNames from 'classnames';
+export let textColor = 'text-white dark:bg-blue-500';
+export let bgColor = 'bg-blue-600';
+export let markClass = 'px-2 rounded';
+</script>
+
+<mark class={classNames(markClass, bgColor, textColor, $$props.class)}>
+	<slot />
+</mark>

package/typography/Mark.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        textColor?: string;
+        bgColor?: string;
+        markClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type MarkProps = typeof __propDef.props;
+export declare type MarkEvents = typeof __propDef.events;
+export declare type MarkSlots = typeof __propDef.slots;
+export default class Mark extends SvelteComponentTyped<MarkProps, MarkEvents, MarkSlots> {
+}
+export {};

package/typography/P.svelte

@@ -0,0 +1,9 @@
+<script>import classNames from 'classnames';
+export let textColor = 'text-gray-500 dark:text-gray-400';
+export let size = 'text-lg';
+export let pClass = 'font-normal';
+</script>
+
+<p class={classNames(pClass, size, textColor, $$props.class)}>
+	<slot />
+</p>

package/typography/P.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        textColor?: string;
+        size?: string;
+        pClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type PProps = typeof __propDef.props;
+export declare type PEvents = typeof __propDef.events;
+export declare type PSlots = typeof __propDef.slots;
+export default class P extends SvelteComponentTyped<PProps, PEvents, PSlots> {
+}
+export {};

package/typography/Secondary.svelte

@@ -0,0 +1,8 @@
+<script>import classNames from 'classnames';
+export let textColor = 'text-gray-500 dark:text-gray-400';
+export let secondaryClass = 'font-semibold';
+</script>
+
+<small class={classNames(textColor, secondaryClass, $$props.class)}>
+	<slot />
+</small>

package/typography/Secondary.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        textColor?: string;
+        secondaryClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type SecondaryProps = typeof __propDef.props;
+export declare type SecondaryEvents = typeof __propDef.events;
+export declare type SecondarySlots = typeof __propDef.slots;
+export default class Secondary extends SvelteComponentTyped<SecondaryProps, SecondaryEvents, SecondarySlots> {
+}
+export {};

package/typography/TextGradient.svelte

@@ -0,0 +1,7 @@
+<script>import classNames from 'classnames';
+export let gradientClass = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+</script>
+
+<span class={classNames(gradientClass, $$props.class)}>
+	<slot />
+</span>

package/typography/TextGradient.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        gradientClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TextGradientProps = typeof __propDef.props;
+export declare type TextGradientEvents = typeof __propDef.events;
+export declare type TextGradientSlots = typeof __propDef.slots;
+export default class TextGradient extends SvelteComponentTyped<TextGradientProps, TextGradientEvents, TextGradientSlots> {
+}
+export {};

package/typography/Underline.svelte

@@ -0,0 +1,7 @@
+<script>import classNames from 'classnames';
+export let underlineClass = 'underline underline-offset-3 decoration-8 decoration-blue-400 dark:decoration-blue-600';
+</script>
+
+<span class={classNames(underlineClass, $$props.class)}>
+	<slot />
+</span>

package/typography/Underline.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        underlineClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type UnderlineProps = typeof __propDef.props;
+export declare type UnderlineEvents = typeof __propDef.events;
+export declare type UnderlineSlots = typeof __propDef.slots;
+export default class Underline extends SvelteComponentTyped<UnderlineProps, UnderlineEvents, UnderlineSlots> {
+}
+export {};