flowbite-svelte 0.26.4 → 0.26.7

package/CHANGELOG.md

@@ -2,6 +2,52 @@
 
 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.26.7](https://github.com/themesberg/flowbite-svelte/compare/v0.26.6...v0.26.7) (2022-09-03)
+
+
+### Features
+
+* add Layout component ([2204586](https://github.com/themesberg/flowbite-svelte/commit/22045861703bf3e46cc7900e15c4db64d5246c50))
+* add paragraphs page ([db973a3](https://github.com/themesberg/flowbite-svelte/commit/db973a3929bfdc8c4dd48338cc114bdc2c808fb8))
+
+
+### Bug Fixes
+
+* add html block to text page ([37e910a](https://github.com/themesberg/flowbite-svelte/commit/37e910ae269099865865580d419b8dd05dccb7a8))
+
+### [0.26.6](https://github.com/themesberg/flowbite-svelte/compare/v0.26.5...v0.26.6) (2022-09-02)
+
+
+### Features
+
+* add highlight to Span component and update heading page ([d47121b](https://github.com/themesberg/flowbite-svelte/commit/d47121ba47e6c6e3dfdd366128f51da77a966e0f))
+* add Text decoration examples to text page ([fe074cd](https://github.com/themesberg/flowbite-svelte/commit/fe074cd2a36d780333444f276de69edec51649d5))
+* add underline and decoratio class to Span ([f3b11a9](https://github.com/themesberg/flowbite-svelte/commit/f3b11a92b3782c27e09f25c894a81402661b73d3))
+
+
+### Bug Fixes
+
+* header blocking anchor links ([af6d2d6](https://github.com/themesberg/flowbite-svelte/commit/af6d2d6eb9bb630e58e76fd214f8a14f0435dc2f))
+* remove TextGradient and Underline ([cb7b2d7](https://github.com/themesberg/flowbite-svelte/commit/cb7b2d753f110cad4677f990d60a11154e38ac93))
+
+### [0.26.5](https://github.com/themesberg/flowbite-svelte/compare/v0.26.4...v0.26.5) (2022-09-02)
+
+
+### Features
+
+* add DescriptionList, List, Span components ([495b61e](https://github.com/themesberg/flowbite-svelte/commit/495b61eb0d81eb9ae06a34fa981dd42a81983ea6))
+* add Ul, Li, Span component ([86d8b66](https://github.com/themesberg/flowbite-svelte/commit/86d8b661f2524f25162a99b6d3b8df761a85b01b))
+
+
+### Bug Fixes
+
+* blockquote page formating ([1641d45](https://github.com/themesberg/flowbite-svelte/commit/1641d45bdc032c01cd201967bf362d9f8a19a422))
+* Heading to the original code ([5604da5](https://github.com/themesberg/flowbite-svelte/commit/5604da5f348420f8878e44d591e9a8704b23e4a0))
+* List in cards page to Listgroup ([b8e05f4](https://github.com/themesberg/flowbite-svelte/commit/b8e05f4f97fbbb0236872b2b5f18f0928c34ad55))
+* rebase merge conflict Alert.svelte ([38df84a](https://github.com/themesberg/flowbite-svelte/commit/38df84a21124d3d3c3c1d716ff21bd678b156b09))
+* removed Ol component ([569f2e3](https://github.com/themesberg/flowbite-svelte/commit/569f2e3a51a59abba641c669949b4b5372c56a01))
+* rename List to Listgroup and ListItem to ListgroupItem ([1b70110](https://github.com/themesberg/flowbite-svelte/commit/1b7011062a729452604b3a0dd1ed54f28ab49132))
+
 ### [0.26.4](https://github.com/themesberg/flowbite-svelte/compare/v0.26.3...v0.26.4) (2022-09-02)
 
 

package/alerts/Alert.svelte

@@ -18,27 +18,27 @@ $: divClass = classNames('p-4 text-sm', accent && 'border-t-4 ', hidden && 'hidd
 </script>
 
 <Frame {color} {rounded} {...$$restProps} class={divClass} role="alert">
-	<div class="flex items-center whitespace-pre-wrap">
-		{#if $$slots.icon}
-			<slot name="icon" />
-		{/if}
+  <div class="flex items-center whitespace-pre-wrap">
+    {#if $$slots.icon}
+      <slot name="icon" />
+    {/if}
 
-		<slot />
+    <slot />
 
-		{#if dismissable}
-			<CloseButton
-				class="-mx-1.5 -my-1.5"
-				{color}
-				on:click={handleHide}
-				on:click
-				on:change
-				on:keydown
-				on:keyup
-				on:focus
-				on:blur
-				on:mouseenter
-				on:mouseleave />
-		{/if}
-	</div>
-	<slot name="extra" />
+    {#if dismissable}
+      <CloseButton
+        class="-mx-1.5 -my-1.5"
+        {color}
+        on:click={handleHide}
+        on:click
+        on:change
+        on:keydown
+        on:keyup
+        on:focus
+        on:blur
+        on:mouseenter
+        on:mouseleave />
+    {/if}
+  </div>
+  <slot name="extra" />
 </Frame>

package/index.d.ts

@@ -43,8 +43,8 @@ export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
 export { default as ArrowKeyLeft } from './kbd/ArrowKeyLeft.svelte';
 export { default as ArrowKeyRight } from './kbd/ArrowKeyRight.svelte';
 export { default as ArrowKeyUp } from './kbd/ArrowKeyUp.svelte';
-export { default as List } from './list-group/List.svelte';
-export { default as ListItem } from './list-group/ListItem.svelte';
+export { default as Listgroup } from './list-group/Listgroup.svelte';
+export { default as ListgroupItem } from './list-group/ListgroupItem.svelte';
 export { default as Modal } from './modals/Modal.svelte';
 export { default as MegaMenu } from './megamenu/MegaMenu.svelte';
 export { default as Navbar } from './navbar/Navbar.svelte';
@@ -108,15 +108,17 @@ export { default as ToolbarGroup } from './toolbar/ToolbarGroup.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 DescriptionList } from './typography/DescriptionList.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 Img } from './typography/Img.svelte';
+export { default as Layout } from './typography/Layout.svelte';
+export { default as Li } from './typography/Li.svelte';
 export { default as Mark } from './typography/Mark.svelte';
+export { default as List } from './typography/List.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 Span } from './typography/Span.svelte';
 export { default as CloseButton } from './utils/CloseButton.svelte';
 export { default as ChevronDown } from './utils/ChevronDown.svelte';
 export { default as ChevronLeft } from './utils/ChevronLeft.svelte';

package/index.js

@@ -59,8 +59,8 @@ export { default as ArrowKeyLeft } from './kbd/ArrowKeyLeft.svelte';
 export { default as ArrowKeyRight } from './kbd/ArrowKeyRight.svelte';
 export { default as ArrowKeyUp } from './kbd/ArrowKeyUp.svelte';
 // List
-export { default as List } from './list-group/List.svelte';
-export { default as ListItem } from './list-group/ListItem.svelte';
+export { default as Listgroup } from './list-group/Listgroup.svelte';
+export { default as ListgroupItem } from './list-group/ListgroupItem.svelte';
 // Modals
 export { default as Modal } from './modals/Modal.svelte';
 // MegaMenu
@@ -141,15 +141,17 @@ 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 DescriptionList } from './typography/DescriptionList.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 Img } from './typography/Img.svelte';
+export { default as Layout } from './typography/Layout.svelte';
+export { default as Li } from './typography/Li.svelte';
 export { default as Mark } from './typography/Mark.svelte';
+export { default as List } from './typography/List.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 Span } from './typography/Span.svelte';
 // utils
 export { default as CloseButton } from './utils/CloseButton.svelte';
 export { default as ChevronDown } from './utils/ChevronDown.svelte';

package/list-group/{List.svelte → Listgroup.svelte}

@@ -1,6 +1,6 @@
 <script>import { setContext } from 'svelte';
 import classNames from 'classnames';
-import ListItem from './ListItem.svelte';
+import ListgroupItem from './ListgroupItem.svelte';
 import Frame from '../utils/Frame.svelte';
 export let items = [];
 export let active = false;
@@ -10,9 +10,9 @@ $: groupClass = classNames('divide-y divide-gray-200 dark:divide-gray-600', $$pr
 </script>
 
 <Frame tag={active ? 'div' : 'ul'} rounded border class={groupClass}>
-	{#each items as item, index}
-		<ListItem {active} {...item} {index} on:click><slot {item} {index} /></ListItem>
-	{:else}
-		<slot />
-	{/each}
+  {#each items as item, index}
+    <ListgroupItem {active} {...item} {index} on:click><slot {item} {index} /></ListgroupItem>
+  {:else}
+    <slot />
+  {/each}
 </Frame>

package/list-group/Listgroup.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ListGroupItemType } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        items?: ListGroupItemType[];
+        active?: boolean;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ListgroupProps = typeof __propDef.props;
+export declare type ListgroupEvents = typeof __propDef.events;
+export declare type ListgroupSlots = typeof __propDef.slots;
+export default class Listgroup extends SvelteComponentTyped<ListgroupProps, ListgroupEvents, ListgroupSlots> {
+}
+export {};

package/list-group/{ListItem.svelte.d.ts → ListgroupItem.svelte.d.ts}

@@ -27,9 +27,9 @@ declare const __propDef: {
         };
     };
 };
-export declare type ListItemProps = typeof __propDef.props;
-export declare type ListItemEvents = typeof __propDef.events;
-export declare type ListItemSlots = typeof __propDef.slots;
-export default class ListItem extends SvelteComponentTyped<ListItemProps, ListItemEvents, ListItemSlots> {
+export declare type ListgroupItemProps = typeof __propDef.props;
+export declare type ListgroupItemEvents = typeof __propDef.events;
+export declare type ListgroupItemSlots = typeof __propDef.slots;
+export default class ListgroupItem extends SvelteComponentTyped<ListgroupItemProps, ListgroupItemEvents, ListgroupItemSlots> {
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.26.4",
+  "version": "0.26.7",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -151,8 +151,8 @@
     "./kbd/ArrowKeyRight.svelte": "./kbd/ArrowKeyRight.svelte",
     "./kbd/ArrowKeyUp.svelte": "./kbd/ArrowKeyUp.svelte",
     "./kbd/Kbd.svelte": "./kbd/Kbd.svelte",
-    "./list-group/List.svelte": "./list-group/List.svelte",
-    "./list-group/ListItem.svelte": "./list-group/ListItem.svelte",
+    "./list-group/Listgroup.svelte": "./list-group/Listgroup.svelte",
+    "./list-group/ListgroupItem.svelte": "./list-group/ListgroupItem.svelte",
     "./megamenu/MegaMenu.svelte": "./megamenu/MegaMenu.svelte",
     "./modals/Modal.svelte": "./modals/Modal.svelte",
     "./navbar/Menu.svelte": "./navbar/Menu.svelte",
@@ -220,14 +220,18 @@
     "./types": "./types.js",
     "./typography/A.svelte": "./typography/A.svelte",
     "./typography/Blockquote.svelte": "./typography/Blockquote.svelte",
+    "./typography/DescriptionList.svelte": "./typography/DescriptionList.svelte",
     "./typography/Heading.svelte": "./typography/Heading.svelte",
-    "./typography/Highlight.svelte": "./typography/Highlight.svelte",
     "./typography/Hr.svelte": "./typography/Hr.svelte",
     "./typography/Img.svelte": "./typography/Img.svelte",
+    "./typography/Layout.svelte": "./typography/Layout.svelte",
+    "./typography/Li.svelte": "./typography/Li.svelte",
+    "./typography/List.svelte": "./typography/List.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/Span.svelte": "./typography/Span.svelte",
+    "./typography/Ul.svelte": "./typography/Ul.svelte",
     "./typography/Underline.svelte": "./typography/Underline.svelte",
     "./utils/ChevronDown.svelte": "./utils/ChevronDown.svelte",
     "./utils/ChevronLeft.svelte": "./utils/ChevronLeft.svelte",

package/typography/A.svelte

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

package/typography/A.svelte.d.ts

@@ -5,7 +5,6 @@ declare const __propDef: {
         href?: string;
         textColor?: string;
         aClass?: string;
-        textSize?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/typography/Blockquote.svelte

@@ -11,24 +11,33 @@ let alignmentClasses = {
     center: 'text-center',
     right: 'text-right'
 };
-export let size = 'xl';
-let sizeClasses = {
+export let size = 'lg';
+const sizes = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    base: 'text-base',
     lg: 'text-lg',
     xl: 'text-xl',
-    xxl: 'text-2xl'
+    '2xl': 'text-2xl',
+    '3xl': 'text-3xl',
+    '4xl': 'text-4xl',
+    '5xl': 'text-5xl',
+    '6xl': 'text-6xl',
+    '7xl': 'text-7xl',
+    '8xl': 'text-8xl',
+    '9xl': 'text-9xl'
 };
 </script>
 
 <blockquote
-	class={classNames(
-		baseClass,
-		alignmentClasses[alignment],
-		sizeClasses[size],
-		bg && bgClass,
-		border && borderClass,
-		italic && 'italic',
-		$$props.class
-	)}
->
-	<slot />
+  class={classNames(
+    baseClass,
+    alignmentClasses[alignment],
+    sizes[size],
+    bg && bgClass,
+    border && borderClass,
+    italic && 'italic',
+    $$props.class
+  )}>
+  <slot />
 </blockquote>

package/typography/Blockquote.svelte.d.ts

@@ -9,7 +9,7 @@ declare const __propDef: {
         bg?: boolean;
         baseClass?: string;
         alignment?: 'left' | 'center' | 'right';
-        size?: 'lg' | 'xl' | 'xxl';
+        size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/typography/DescriptionList.svelte

@@ -0,0 +1,10 @@
+<script>import classNames from 'classnames';
+export let tag;
+export let dtClass = 'text-gray-500 md:text-lg dark:text-gray-400';
+export let ddClass = 'text-lg font-semibold';
+let classDesc = classNames(tag === 'dt' ? dtClass : ddClass, $$props.class);
+</script>
+
+<svelte:element this={tag} class={classDesc}>
+  <slot />
+</svelte:element>

package/typography/DescriptionList.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        tag: 'dt' | 'dd';
+        dtClass?: string;
+        ddClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type DescriptionListProps = typeof __propDef.props;
+export declare type DescriptionListEvents = typeof __propDef.events;
+export declare type DescriptionListSlots = typeof __propDef.slots;
+export default class DescriptionList extends SvelteComponentTyped<DescriptionListProps, DescriptionListEvents, DescriptionListSlots> {
+}
+export {};

package/typography/Heading.svelte

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

package/typography/Layout.svelte

@@ -0,0 +1,10 @@
+<script>import classNames from 'classnames';
+export let divClass = 'grid';
+export let cols = 'grid-cols-1 sm:grid-cols-2';
+export let gap;
+let classDiv = classNames(divClass, 'gap-' + String(gap), cols);
+</script>
+
+<div class={classDiv}>
+  <slot />
+</div>

package/typography/Layout.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        divClass?: string;
+        cols?: string;
+        gap: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type LayoutProps = typeof __propDef.props;
+export declare type LayoutEvents = typeof __propDef.events;
+export declare type LayoutSlots = typeof __propDef.slots;
+export default class Layout extends SvelteComponentTyped<LayoutProps, LayoutEvents, LayoutSlots> {
+}
+export {};

package/typography/Li.svelte

@@ -0,0 +1,9 @@
+<script>import classNames from 'classnames';
+export let icon = false;
+export let liClass = '';
+let classLi = classNames(liClass, icon && 'flex items-center', $$props.class);
+</script>
+
+<li class={classLi}>
+  <slot />
+</li>

package/typography/Li.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        icon?: boolean;
+        liClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type LiProps = typeof __propDef.props;
+export declare type LiEvents = typeof __propDef.events;
+export declare type LiSlots = typeof __propDef.slots;
+export default class Li extends SvelteComponentTyped<LiProps, LiEvents, LiSlots> {
+}
+export {};

package/typography/List.svelte

@@ -0,0 +1,23 @@
+<script>import classNames from 'classnames';
+export let tag = 'ul';
+export let list = 'disc';
+export let position = 'inside';
+export let color = 'text-gray-500 dark:text-gray-400';
+export let olClass = 'list-decimal list-inside';
+export let ulClass = 'max-w-md';
+export let dlClass = 'max-w-md divide-y divide-gray-200  dark:divide-gray-700';
+let lists = {
+    disc: 'list-disc',
+    none: 'list-none',
+    decimal: 'list-decimal'
+};
+let positions = {
+    inside: 'list-inside',
+    outside: 'list-outside'
+};
+let classList = classNames(color, tag === 'ul' ? ulClass : 'ol' ? olClass : dlClass, lists[list], positions[position], $$props.class);
+</script>
+
+<svelte:element this={tag} class={classList}>
+  <slot />
+</svelte:element>

package/{list-group → typography}/List.svelte.d.ts

@@ -1,14 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ListGroupItemType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        items?: ListGroupItemType[];
-        active?: boolean;
+        tag?: 'ul' | 'ol' | 'dl';
+        list?: 'disc' | 'none' | 'decimal';
+        position?: 'inside' | 'outside';
+        color?: string;
+        olClass?: string;
+        ulClass?: string;
+        dlClass?: string;
     };
     events: {
-        click: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/typography/P.svelte

@@ -1,9 +1,77 @@
 <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';
+export let color = 'text-gray-900 dark:text-white';
+export let height = 'normal';
+export let align = 'left';
+export let justify = false;
+export let italic = false;
+export let firstupper = false;
+export let upperClass = 'first-line:uppercase first-line:tracking-widest first-letter:text-7xl first-letter:font-bold first-letter:text-gray-900 dark:first-letter:text-gray-100 first-letter:mr-3 first-letter:float-left';
+export let opacity;
+export let whitespace = 'normal';
+export let size = 'base';
+export let space;
+export let weight;
+const sizes = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    base: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+    '2xl': 'text-2xl',
+    '3xl': 'text-3xl',
+    '4xl': 'text-4xl',
+    '5xl': 'text-5xl',
+    '6xl': 'text-6xl',
+    '7xl': 'text-7xl',
+    '8xl': 'text-8xl',
+    '9xl': 'text-9xl'
+};
+const weights = {
+    thin: 'font-thin',
+    extralight: 'font-extralight',
+    light: 'font-light',
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+    extrabold: 'font-extrabold',
+    black: 'font-black'
+};
+const spaces = {
+    tighter: 'tracking-tighter',
+    tight: 'tracking-tight',
+    normal: 'tracking-normal',
+    wide: 'tracking-wide',
+    wider: 'tracking-wider',
+    widest: 'tracking-widest'
+};
+const heights = {
+    normal: 'leading-normal',
+    relaxed: 'leading-relaxed',
+    loose: 'leading-loose'
+};
+const aligns = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right'
+};
+const whitespaces = {
+    normal: 'whitespace-normal',
+    nowrap: 'whitespace-nowrap',
+    pre: 'whitespace-pre',
+    preline: 'whitespace-pre-line',
+    prewrap: 'whitespace-pre-wrap'
+};
+let colorAndopacity = color
+    .split(' ')
+    .map((element) => element.trim())
+    .map((element) => element + '/' + String(opacity))
+    .join(' ');
+// console.log('colorArr', colorAndopacity);
+// console.log(typeof colorAndopacity);
+let classP = classNames(size && sizes[size], (opacity && colorAndopacity) || (color && color), height && heights[height], weight && weights[weight], space && spaces[space], align && aligns[align], justify && 'text-justify', italic && 'italic', firstupper && upperClass, whitespace && whitespaces[whitespace], $$props.class);
 </script>
 
-<p class={classNames(pClass, size, textColor, $$props.class)}>
-	<slot />
+<p class={classP}>
+  <slot />
 </p>

package/typography/P.svelte.d.ts

@@ -2,9 +2,18 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        textColor?: string;
-        size?: string;
-        pClass?: string;
+        color?: string;
+        height?: 'normal' | 'relaxed' | 'loose';
+        align?: 'left' | 'center' | 'right';
+        justify?: boolean;
+        italic?: boolean;
+        firstupper?: boolean;
+        upperClass?: string;
+        opacity: number;
+        whitespace?: 'normal' | 'nowrap' | 'pre' | 'preline' | 'prewrap';
+        size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
+        space: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';
+        weight: 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/typography/Span.svelte

@@ -0,0 +1,17 @@
+<script>import classNames from 'classnames';
+export let italic = false;
+export let underline = false;
+export let linethrough = false;
+export let uppercase = false;
+export let gradient = false;
+export let highlight = false;
+export let highlightClass = 'text-blue-600 dark:text-blue-500';
+export let decorationClass = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
+export let gradientClass = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+let underlineClass = classNames('underline', decorationClass);
+let classSpan = classNames(italic && 'italic', underline && underlineClass, linethrough && 'line-through', uppercase && 'uppercase', gradient ? gradientClass : 'font-semibold text-gray-900 dark:text-white', highlight && highlightClass, $$props.class);
+</script>
+
+<span class={classSpan}>
+  <slot />
+</span>

package/typography/Span.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        italic?: boolean;
+        underline?: boolean;
+        linethrough?: boolean;
+        uppercase?: boolean;
+        gradient?: boolean;
+        highlight?: boolean;
+        highlightClass?: string;
+        decorationClass?: string;
+        gradientClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type SpanProps = typeof __propDef.props;
+export declare type SpanEvents = typeof __propDef.events;
+export declare type SpanSlots = typeof __propDef.slots;
+export default class Span extends SvelteComponentTyped<SpanProps, SpanEvents, SpanSlots> {
+}
+export {};

package/typography/Ul.svelte

@@ -0,0 +1,20 @@
+<script>import classNames from 'classnames';
+export let list = 'disc';
+export let position = 'inside';
+export let ulClass = 'max-w-md text-gray-500 dark:text-gray-400';
+let lists = {
+    disc: 'list-disc',
+    none: 'list-none',
+    decimal: 'list-decimal'
+};
+let positions = {
+    inside: 'list-inside',
+    outside: 'list-outside'
+};
+let classUl = classNames(ulClass, lists[list], positions[position], $$props.class);
+console.log('list', list);
+</script>
+
+<ul class={classUl} {list}>
+  <slot />
+</ul>

package/typography/Ul.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        list?: 'disc' | 'none' | 'decimal';
+        position?: 'inside' | 'outside';
+        ulClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type UlProps = typeof __propDef.props;
+export declare type UlEvents = typeof __propDef.events;
+export declare type UlSlots = typeof __propDef.slots;
+export default class Ul extends SvelteComponentTyped<UlProps, UlEvents, UlSlots> {
+}
+export {};

package/typography/Underline.svelte

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

package/typography/Highlight.svelte

@@ -1,7 +0,0 @@
-<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

@@ -1,19 +0,0 @@
-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/TextGradient.svelte

@@ -1,7 +0,0 @@
-<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

@@ -1,19 +0,0 @@
-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 {};