flowbite-svelte 0.25.10 → 0.25.13

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 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.13](https://github.com/themesberg/flowbite-svelte/compare/v0.25.12...v0.25.13) (2022-08-23)
+
+
+### Features
+
+* add bind:value to Iconinput ([87616e2](https://github.com/themesberg/flowbite-svelte/commit/87616e2222611bfabd77c3f7699c5f716015e420))
+* add link examples ([b129251](https://github.com/themesberg/flowbite-svelte/commit/b12925106d6ffe482dfbde5623925f72abe8a577))
+* add links page ([cdb2566](https://github.com/themesberg/flowbite-svelte/commit/cdb2566640bc5153e4d310dc2306aaafe432f5de))
+
+### [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)
+
+
+### Features
+
+* add Blockquote ([89cbfbd](https://github.com/themesberg/flowbite-svelte/commit/89cbfbdf56e7beca90b00cf4c9c033789b2a2ba5))
+* add size to Rating component ([7c2784e](https://github.com/themesberg/flowbite-svelte/commit/7c2784efff60877014c14a8acc7760f845671100))
+* add User review, User testimonial, Paragraph context, Blockquote icon to typography/blockquote page ([73143ba](https://github.com/themesberg/flowbite-svelte/commit/73143bad816f6b3249fff3486d3b8569f45fde7f))
+
 ### [0.25.10](https://github.com/themesberg/flowbite-svelte/compare/v0.25.9...v0.25.10) (2022-08-22)
 
 

package/forms/Iconinput.svelte

@@ -1,5 +1,7 @@
 <script>import classNames from 'classnames';
-export let type = 'text';
+// import type { InputType } from '../types';
+// export let type: InputType = 'text';
+export let value = '';
 export let size = 'md';
 export let icon;
 export let noBorder = false;
@@ -37,7 +39,7 @@ export let iconClass = 'mr-2';
 		</span>
 		<input
 			{...$$restProps}
-			{type}
+			bind:value
 			class={classNames(
 				noBorderInputClass,
 				{
@@ -65,7 +67,7 @@ export let iconClass = 'mr-2';
 		</div>
 		<input
 			{...$$restProps}
-			{type}
+			bind:value
 			class={classNames(
 				inputClass,
 				{

package/forms/Iconinput.svelte.d.ts

@@ -1,10 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 import type { SvelteComponent } from 'svelte';
-import type { InputType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        type?: InputType;
+        value?: string;
         size?: 'sm' | 'md' | 'lg';
         icon: typeof SvelteComponent;
         noBorder?: boolean;

package/icons/Figma.svelte

@@ -0,0 +1,34 @@
+<svg
+	aria-hidden="true"
+	class="mr-3 w-5 h-5"
+	viewBox="0 0 22 31"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	><g clip-path="url(#clip0_4151_63004)"
+		><path
+			d="M5.50085 30.1242C8.53625 30.1242 10.9998 27.8749 10.9998 25.1035V20.0828H5.50085C2.46546 20.0828 0.00195312 22.332 0.00195312 25.1035C0.00195312 27.8749 2.46546 30.1242 5.50085 30.1242Z"
+			fill="#0ACF83"
+		/><path
+			d="M0.00195312 15.062C0.00195312 12.2905 2.46546 10.0413 5.50085 10.0413H10.9998V20.0827H5.50085C2.46546 20.0827 0.00195312 17.8334 0.00195312 15.062Z"
+			fill="#A259FF"
+		/><path
+			d="M0.00195312 5.02048C0.00195312 2.24904 2.46546 -0.000244141 5.50085 -0.000244141H10.9998V10.0412H5.50085C2.46546 10.0412 0.00195312 7.79193 0.00195312 5.02048Z"
+			fill="#F24E1E"
+		/><path
+			d="M11 -0.000244141H16.4989C19.5343 -0.000244141 21.9978 2.24904 21.9978 5.02048C21.9978 7.79193 19.5343 10.0412 16.4989 10.0412H11V-0.000244141Z"
+			fill="#FF7262"
+		/><path
+			d="M21.9978 15.062C21.9978 17.8334 19.5343 20.0827 16.4989 20.0827C13.4635 20.0827 11 17.8334 11 15.062C11 12.2905 13.4635 10.0413 16.4989 10.0413C19.5343 10.0413 21.9978 12.2905 21.9978 15.062Z"
+			fill="#1ABCFE"
+		/></g
+	><defs
+		><clipPath id="clip0_4151_63004"
+			><rect
+				width="22"
+				height="30.1244"
+				fill="white"
+				transform="translate(0 -0.000244141)"
+			/></clipPath
+		></defs
+	></svg
+>

package/icons/Figma.svelte.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  FigmaProps */
+/** @typedef {typeof __propDef.events}  FigmaEvents */
+/** @typedef {typeof __propDef.slots}  FigmaSlots */
+export default class Figma extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FigmaProps = typeof __propDef.props;
+export type FigmaEvents = typeof __propDef.events;
+export type FigmaSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/icons/QuoteLeft.svelte

@@ -0,0 +1,17 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+</script>
+
+<svg
+	aria-hidden="true"
+	width={size}
+	height={size}
+	class={$$props.class}
+	viewBox="0 0 24 27"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		d="M14.017 18L14.017 10.609C14.017 4.905 17.748 1.039 23 0L23.995 2.151C21.563 3.068 20 5.789 20 8H24V18H14.017ZM0 18V10.609C0 4.905 3.748 1.038 9 0L9.996 2.151C7.563 3.068 6 5.789 6 8H9.983L9.983 18L0 18Z"
+		fill={color}
+	/></svg
+>

package/icons/QuoteLeft.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string;
+        color?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type QuoteLeftProps = typeof __propDef.props;
+export declare type QuoteLeftEvents = typeof __propDef.events;
+export declare type QuoteLeftSlots = typeof __propDef.slots;
+export default class QuoteLeft extends SvelteComponentTyped<QuoteLeftProps, QuoteLeftEvents, QuoteLeftSlots> {
+}
+export {};

package/index.d.ts

@@ -40,6 +40,8 @@ export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
 export { default as Textarea } from './forms/Textarea.svelte';
 export { default as Toggle } from './forms/Toggle.svelte';
 export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
+export { default as QuoteLeft } from './icons/QuoteLeft.svelte';
+export { default as Figma } from './icons/Figma.svelte';
 export { default as Kbd } from './kbd/Kbd.svelte';
 export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
 export { default as ArrowKeyLeft } from './kbd/ArrowKeyLeft.svelte';
@@ -112,8 +114,10 @@ export { default as TimelineItemVertical } from './timelines/TimelineItemVertica
 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 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

@@ -55,6 +55,9 @@ export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
 export { default as Textarea } from './forms/Textarea.svelte';
 export { default as Toggle } from './forms/Toggle.svelte';
 export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
+// Icons
+export { default as QuoteLeft } from './icons/QuoteLeft.svelte';
+export { default as Figma } from './icons/Figma.svelte';
 // Kbd
 export { default as Kbd } from './kbd/Kbd.svelte';
 export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
@@ -145,8 +148,10 @@ export { default as Toast } from './toasts/Toast.svelte';
 export { default as Tooltip } from './tooltips/Tooltip.svelte';
 // Typography
 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.10",
+  "version": "0.25.13",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -149,6 +149,8 @@
     "./forms/Textarea.svelte": "./forms/Textarea.svelte",
     "./forms/Toggle.svelte": "./forms/Toggle.svelte",
     "./forms/VoiceSearch.svelte": "./forms/VoiceSearch.svelte",
+    "./icons/Figma.svelte": "./icons/Figma.svelte",
+    "./icons/QuoteLeft.svelte": "./icons/QuoteLeft.svelte",
     ".": "./index.js",
     "./kbd/ArrowKeyDown.svelte": "./kbd/ArrowKeyDown.svelte",
     "./kbd/ArrowKeyLeft.svelte": "./kbd/ArrowKeyLeft.svelte",
@@ -223,8 +225,10 @@
     "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
     "./types": "./types.js",
     "./typography/A.svelte": "./typography/A.svelte",
+    "./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/ratings/Rating.svelte

@@ -1,5 +1,6 @@
 <script>import { Star } from 'svelte-heros';
 export let divClass = 'flex items-center';
+export let size = '24';
 export let total = 5;
 export let rating = 4;
 // default is floor
@@ -11,13 +12,13 @@ let grayStars = total - roundedRating;
 
 <div class={divClass}>
 	{#if count}
-		<Star variation="solid" size="24" class="text-yellow-300 dark:text-yellow-200" />
+		<Star variation="solid" {size} class="text-yellow-300 dark:text-yellow-200" />
 		<p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">{rating}</p>
 		<slot />
 	{:else}
 		{#each Array(roundedRating) as _, star}
 			<slot name="ratingUp">
-				<Star variation="solid" size="24" class="text-yellow-300 dark:text-yellow-200" />
+				<Star variation="solid" {size} class="text-yellow-300 dark:text-yellow-200" />
 			</slot>
 		{/each}
 		{#each Array(grayStars) as _, star}

package/ratings/Rating.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         divClass?: string;
+        size?: string;
         total?: number;
         rating?: number;
         ceil?: boolean;

package/typography/Blockquote.svelte

@@ -0,0 +1,34 @@
+<script>import classNames from 'classnames';
+export let border = false;
+export let italic = true;
+export let borderClass = 'border-l-4 border-gray-300 dark:border-gray-500';
+export let bgClass = 'bg-gray-50 dark:bg-gray-800';
+export let bg = false;
+export let baseClass = 'font-semibold text-gray-900 dark:text-white';
+export let alignment = 'left';
+let alignmentClasses = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right'
+};
+export let size = 'xl';
+let sizeClasses = {
+    lg: 'text-lg',
+    xl: 'text-xl',
+    xxl: 'text-2xl'
+};
+</script>
+
+<blockquote
+	class={classNames(
+		baseClass,
+		alignmentClasses[alignment],
+		sizeClasses[size],
+		bg && bgClass,
+		border && borderClass,
+		italic && 'italic',
+		$$props.class
+	)}
+>
+	<slot />
+</blockquote>

package/typography/Blockquote.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        border?: boolean;
+        italic?: boolean;
+        borderClass?: string;
+        bgClass?: string;
+        bg?: boolean;
+        baseClass?: string;
+        alignment?: 'left' | 'center' | 'right';
+        size?: 'lg' | 'xl' | 'xxl';
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type BlockquoteProps = typeof __propDef.props;
+export declare type BlockquoteEvents = typeof __propDef.events;
+export declare type BlockquoteSlots = typeof __propDef.slots;
+export default class Blockquote extends SvelteComponentTyped<BlockquoteProps, BlockquoteEvents, BlockquoteSlots> {
+}
+export {};

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 {};