flowbite-svelte 0.25.11 → 0.25.12

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.12](https://github.com/themesberg/flowbite-svelte/compare/v0.25.11...v0.25.12) (2022-08-22)
+
+
+### Features
+
+* add Hr component and page ([f289c1e](https://github.com/themesberg/flowbite-svelte/commit/f289c1ebd6cfcbcfde87b28ce3108abaf54248ca))
+
 ### [0.25.11](https://github.com/themesberg/flowbite-svelte/compare/v0.25.10...v0.25.11) (2022-08-22)
 
 

package/index.d.ts

@@ -116,6 +116,7 @@ export { default as A } from './typography/A.svelte';
 export { default as Blockquote } from './typography/Blockquote.svelte';
 export { default as Heading } from './typography/Heading.svelte';
 export { default as Highlight } from './typography/Highlight.svelte';
+export { default as Hr } from './typography/Hr.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';

package/index.js

@@ -150,6 +150,7 @@ export { default as A } from './typography/A.svelte';
 export { default as Blockquote } from './typography/Blockquote.svelte';
 export { default as Heading } from './typography/Heading.svelte';
 export { default as Highlight } from './typography/Highlight.svelte';
+export { default as Hr } from './typography/Hr.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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.25.11",
+  "version": "0.25.12",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -227,6 +227,7 @@
     "./typography/Blockquote.svelte": "./typography/Blockquote.svelte",
     "./typography/Heading.svelte": "./typography/Heading.svelte",
     "./typography/Highlight.svelte": "./typography/Highlight.svelte",
+    "./typography/Hr.svelte": "./typography/Hr.svelte",
     "./typography/Mark.svelte": "./typography/Mark.svelte",
     "./typography/P.svelte": "./typography/P.svelte",
     "./typography/Secondary.svelte": "./typography/Secondary.svelte",

package/typography/Heading.svelte

@@ -14,7 +14,7 @@ const textSizes = {
 
 <svelte:element
 	this={tag}
-	class={classNames(customSize ? customSize : textSizes[tag], textColor, $$props.class)}
+	class={classNames(customSize ? customSize : textSizes[tag], textColor, 'w-full', $$props.class)}
 >
 	<slot />
 </svelte:element>

package/typography/Hr.svelte

@@ -0,0 +1,29 @@
+<script>import classNames from 'classnames';
+export let divClass = 'inline-flex justify-center items-center w-full';
+export let hrClass = 'bg-gray-200 rounded border-0 dark:bg-gray-700';
+// bg-gray-200 rounded border-0 dark:bg-gray-700
+export let width = 'w-full';
+export let height = 'h-px';
+export let iconSize = 24;
+export let iconClass = 'text-gray-700 dark:text-gray-300';
+export let icon;
+export let text;
+export let iconDivClass = 'absolute left-1/2 px-4 bg-white -translate-x-1/2 dark:bg-gray-900';
+export let textSpanClass = 'absolute left-1/2 px-3 font-medium text-gray-900 bg-white -translate-x-1/2 dark:text-white dark:bg-gray-900';
+let horizontalClass = classNames(hrClass, width, height, $$props.class);
+</script>
+
+{#if icon || text}
+	<div class={classNames(divClass, $$props.classDiv)}>
+		<hr class={horizontalClass} />
+		{#if icon}
+			<div class={iconDivClass}>
+				<svelte:component this={icon} size={iconSize} class={iconClass} />
+			</div>
+		{:else}
+			<span class={textSpanClass}>or</span>
+		{/if}
+	</div>
+{:else}
+	<hr class={horizontalClass} />
+{/if}

package/typography/Hr.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SvelteComponent } from 'svelte';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        divClass?: string;
+        hrClass?: string;
+        width?: string;
+        height?: string;
+        iconSize?: number;
+        iconClass?: string;
+        icon: typeof SvelteComponent;
+        text: string;
+        iconDivClass?: string;
+        textSpanClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type HrProps = typeof __propDef.props;
+export declare type HrEvents = typeof __propDef.events;
+export declare type HrSlots = typeof __propDef.slots;
+export default class Hr extends SvelteComponentTyped<HrProps, HrEvents, HrSlots> {
+}
+export {};