flowbite-svelte 0.9.0 → 0.9.1

package/cards/EcommerceCard.svelte

@@ -1,98 +1,98 @@
-<script>
-  export let img = {
-    src: "/images/product-1.png",
-    alt: "product image",
-  };
-  export let link = "/#";
-  export let btnColor = "blue";
-  export let rel;
-  export let title =
-    "Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport";
-  export let stars = "5.0";
-  export let price = "$555";
-  let spanClass;
-  let linkClass;
-  if (btnColor === "blue") {
+<script >export let img = {
+    src: '/images/product-1.png',
+    alt: 'product image'
+};
+export let link = '/#';
+export let btnColor = 'blue';
+export let rel;
+export let title = 'Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport';
+export let stars = 5;
+export let price = '$555';
+let spanClass;
+let linkClass;
+if (btnColor === 'blue') {
     spanClass =
-      "bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3";
+        'bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3';
     linkClass =
-      "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
-  } else if (btnColor === "gray") {
+        'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+}
+else if (btnColor === 'gray') {
     spanClass =
-      "bg-gray-100 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-gray-200 dark:text-gray-800 ml-3";
+        'bg-gray-100 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-gray-200 dark:text-gray-800 ml-3';
     linkClass =
-      "text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800";
-  } else if (btnColor === "red") {
+        'text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
+}
+else if (btnColor === 'red') {
     spanClass =
-      "bg-red-100 text-red-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-red-200 dark:text-red-800 ml-3";
+        'bg-red-100 text-red-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-red-200 dark:text-red-800 ml-3';
     linkClass =
-      "text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800";
-  } else if (btnColor === "yellow") {
+        'text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
+}
+else if (btnColor === 'yellow') {
     spanClass =
-      "bg-yellow-100 text-yellow-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-200 dark:text-yellow-800 ml-3";
+        'bg-yellow-100 text-yellow-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-200 dark:text-yellow-800 ml-3';
     linkClass =
-      "text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800";
-  } else if (btnColor === "green") {
+        'text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
+}
+else if (btnColor === 'green') {
     spanClass =
-      "bg-green-100 text-green-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-green-200 dark:text-green-800 ml-3";
+        'bg-green-100 text-green-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-green-200 dark:text-green-800 ml-3';
     linkClass =
-      "text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800";
-  } else if (btnColor === "indigo") {
+        'text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
+}
+else if (btnColor === 'indigo') {
     spanClass =
-      "bg-indigo-100 text-indigo-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-indigo-200 dark:text-indigo-800 ml-3";
+        'bg-indigo-100 text-indigo-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-indigo-200 dark:text-indigo-800 ml-3';
     linkClass =
-      "text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800";
-  } else if (btnColor === "purple") {
+        'text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
+}
+else if (btnColor === 'purple') {
     spanClass =
-      "bg-purple-100 text-purple-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-800 ml-3";
+        'bg-purple-100 text-purple-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-800 ml-3';
     linkClass =
-      "text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800";
-  } else if (btnColor === "pink") {
+        'text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
+}
+else if (btnColor === 'pink') {
     spanClass =
-      "bg-pink-100 text-pink-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-pink-200 dark:text-pink-800 ml-3";
+        'bg-pink-100 text-pink-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-pink-200 dark:text-pink-800 ml-3';
     linkClass =
-      "text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800";
-  } else {
+        'text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
+}
+else {
     spanClass =
-      "bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3";
+        'bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3';
     linkClass =
-      "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
-  }
+        'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+}
 </script>
 
-<div
-  class="max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700"
->
-  <a href={link} {rel}>
-    <img class="p-8 rounded-t-lg" src={img.src} alt={img.alt} />
-  </a>
-  <div class="px-5 pb-5">
-    <a href={link} {rel}>
-      <h3
-        class="text-xl font-semibold tracking-tight text-gray-900 dark:text-white"
-      >
-        {title}
-      </h3>
-    </a>
-    <div class="flex items-center mt-2.5 mb-5">
-      {#each { length: parseInt(stars) } as _, i}
-        <svg
-          class="w-5 h-5 text-yellow-300"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-          ><path
-            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-          /></svg
-        >
-      {/each}
-      <span class={spanClass}>{stars}</span>
-    </div>
-    <div class="flex justify-between items-center">
-      <span class="text-3xl font-bold text-gray-900 dark:text-white"
-        >{price}</span
-      >
-      <a href={link} {rel} class={linkClass}>Add to cart</a>
-    </div>
-  </div>
+<div class="max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+	<a href={link} {rel}>
+		<img class="p-8 rounded-t-lg" src={img.src} alt={img.alt} />
+	</a>
+	<div class="px-5 pb-5">
+		<a href={link} {rel}>
+			<h3 class="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">
+				{title}
+			</h3>
+		</a>
+		<div class="flex items-center mt-2.5 mb-5">
+			{#each { length: stars } as _, i}
+				<svg
+					class="w-5 h-5 text-yellow-300"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+					xmlns="http://www.w3.org/2000/svg"
+					><path
+						d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+					/></svg
+				>
+			{/each}
+			<span class={spanClass}>{stars}</span>
+		</div>
+		<div class="flex justify-between items-center">
+			<span class="text-3xl font-bold text-gray-900 dark:text-white">{price}</span>
+			<a href={link} {rel} class={linkClass}>Add to cart</a>
+		</div>
+	</div>
 </div>

package/cards/EcommerceCard.svelte.d.ts

@@ -1,36 +1,13 @@
-/** @typedef {typeof __propDef.props}  EcommerceCardProps */
-/** @typedef {typeof __propDef.events}  EcommerceCardEvents */
-/** @typedef {typeof __propDef.slots}  EcommerceCardSlots */
-export default class EcommerceCard extends SvelteComponentTyped<{
-    rel: any;
-    link?: string;
-    btnColor?: string;
-    img?: {
-        src: string;
-        alt: string;
-    };
-    title?: string;
-    stars?: string;
-    price?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type EcommerceCardProps = typeof __propDef.props;
-export type EcommerceCardEvents = typeof __propDef.events;
-export type EcommerceCardSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { CardImg, Colors } from '../types';
 declare const __propDef: {
     props: {
-        rel: any;
+        img?: CardImg;
         link?: string;
-        btnColor?: string;
-        img?: {
-            src: string;
-            alt: string;
-        };
+        btnColor?: Colors;
+        rel: string;
         title?: string;
-        stars?: string;
+        stars?: number;
         price?: string;
     };
     events: {
@@ -38,4 +15,9 @@ declare const __propDef: {
     };
     slots: {};
 };
+export declare type EcommerceCardProps = typeof __propDef.props;
+export declare type EcommerceCardEvents = typeof __propDef.events;
+export declare type EcommerceCardSlots = typeof __propDef.slots;
+export default class EcommerceCard extends SvelteComponentTyped<EcommerceCardProps, EcommerceCardEvents, EcommerceCardSlots> {
+}
 export {};

package/dropdowns/DropdownDefault.svelte.d.ts

@@ -2,10 +2,10 @@
 /** @typedef {typeof __propDef.events}  DropdownDefaultEvents */
 /** @typedef {typeof __propDef.slots}  DropdownDefaultSlots */
 export default class DropdownDefault extends SvelteComponentTyped<{
+    label?: string;
+    rounded?: boolean;
     textSize?: string;
     color?: string;
-    rounded?: boolean;
-    label?: string;
     items?: ({
         link: string;
         label: string;
@@ -27,10 +27,10 @@ export type DropdownDefaultSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        label?: string;
+        rounded?: boolean;
         textSize?: string;
         color?: string;
-        rounded?: boolean;
-        label?: string;
         items?: ({
             link: string;
             label: string;

package/modals/ExtraLargeModal.svelte.d.ts

@@ -6,8 +6,8 @@ export default class ExtraLargeModal extends SvelteComponentTyped<{
     btn2: any;
     showModalId: any;
     id?: string;
-    btnColor?: string;
     title?: string;
+    btnColor?: string;
     textColor?: string;
 }, {
     handlebtn1: CustomEvent<any>;
@@ -28,8 +28,8 @@ declare const __propDef: {
         btn2: any;
         showModalId: any;
         id?: string;
-        btnColor?: string;
         title?: string;
+        btnColor?: string;
         textColor?: string;
     };
     events: {

package/modals/LargeModal.svelte.d.ts

@@ -6,8 +6,8 @@ export default class LargeModal extends SvelteComponentTyped<{
     btn2: any;
     showModalId: any;
     id?: string;
-    btnColor?: string;
     title?: string;
+    btnColor?: string;
     textColor?: string;
 }, {
     handlebtn1: CustomEvent<any>;
@@ -28,8 +28,8 @@ declare const __propDef: {
         btn2: any;
         showModalId: any;
         id?: string;
-        btnColor?: string;
         title?: string;
+        btnColor?: string;
         textColor?: string;
     };
     events: {

package/modals/MediumModal.svelte.d.ts

@@ -6,8 +6,8 @@ export default class MediumModal extends SvelteComponentTyped<{
     btn2: any;
     showModalId: any;
     id?: string;
-    btnColor?: string;
     title?: string;
+    btnColor?: string;
     textColor?: string;
 }, {
     handlebtn1: CustomEvent<any>;
@@ -28,8 +28,8 @@ declare const __propDef: {
         btn2: any;
         showModalId: any;
         id?: string;
-        btnColor?: string;
         title?: string;
+        btnColor?: string;
         textColor?: string;
     };
     events: {

package/modals/SmallModal.svelte.d.ts

@@ -6,8 +6,8 @@ export default class SmallModal extends SvelteComponentTyped<{
     btn2: any;
     showModalId: any;
     id?: string;
-    btnColor?: string;
     title?: string;
+    btnColor?: string;
     textColor?: string;
 }, {
     handlebtn1: CustomEvent<any>;
@@ -28,8 +28,8 @@ declare const __propDef: {
         btn2: any;
         showModalId: any;
         id?: string;
-        btnColor?: string;
         title?: string;
+        btnColor?: string;
         textColor?: string;
     };
     events: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Flowbite components for Svelte",
   "author": {
     "name": "Shinichi Okada",
@@ -11,7 +11,9 @@
   "homepage": "https://github.com/shinokada/flowbite-svelte",
   "license": "MIT",
   "devDependencies": {
+    "@codewithshin/svelte-sidebar": "^0.2.3",
     "@codewithshin/svelte-simpleicons": "^0.2.2",
+    "@codewithshin/svelte-utterances": "^0.1.2",
     "@playwright/test": "^1.19.1",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
@@ -21,10 +23,14 @@
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.1",
+    "flowbite-svelte": "^0.9.0",
+    "mdsvex": "^0.10.5",
     "postcss": "^8.4.5",
     "postcss-load-config": "^3.1.1",
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.5.0",
+    "prism-themes": "^1.9.0",
+    "prismjs": "^1.27.0",
     "svelte": "^3.44.0",
     "svelte-check": "^2.2.6",
     "svelte-preprocess": "^4.10.1",
@@ -110,7 +116,8 @@
     "./tabs/InteractiveTabs.svelte": "./tabs/InteractiveTabs.svelte",
     "./tabs/PillTabs.svelte": "./tabs/PillTabs.svelte",
     "./tooltips/LightTooltip.svelte": "./tooltips/LightTooltip.svelte",
-    "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte"
+    "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
+    "./types": "./types.js"
   },
   "svelte": "./index.js"
 }

package/types.d.ts

@@ -0,0 +1,23 @@
+export declare type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink';
+export declare type Buttontypes = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
+export declare type Buttonshadows = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple';
+export declare type Gradientduotones = 'purple2blue' | 'cyan2blue' | 'green2blue' | 'purple2pink' | 'pink2orange' | 'teal2lime' | 'red2yellow';
+export declare type Textsize = 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'text-2xl' | 'text-3xl' | 'text-4xl';
+export interface ButtonGroupType {
+    name?: string;
+    link?: string;
+    rel?: string;
+    icon?: any;
+}
+export declare type CardButton = {
+    textSize?: Textsize;
+    name?: string;
+    type?: Buttontypes;
+    link?: string;
+    rel?: string;
+    rounded?: boolean;
+};
+export declare type CardImg = {
+    src: string;
+    alt?: string;
+};

package/types.js

@@ -0,0 +1 @@
+export {};