flowbite-svelte 0.27.15 → 0.27.16

package/src/lib/types.ts

@@ -1,285 +0,0 @@
-import type { SvelteComponent } from 'svelte';
-
-export interface ActivityType {
-	title: HTMLElement | string;
-	date: Date | string;
-	src: string;
-	alt: string;
-	text?: HTMLElement | string;
-}
-
-export type AlignType = 'text-center' | 'text-left' | 'text-right';
-
-export interface AuthFieldType {
-	label: string;
-	fieldtype: string;
-	required?: boolean;
-	placeholder?: string;
-}
-
-export type AuthFunctionType = () => Promise<void>;
-
-export type ButtonType = 'button' | 'submit' | 'reset';
-
-export type Buttontypes = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
-
-export type Buttonshadows = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple';
-
-export type CarouselIconType = {
-	next: typeof SvelteComponent;
-	prev: typeof SvelteComponent;
-};
-
-export interface CheckboxType {
-	id: string;
-	label: string;
-	checked?: boolean;
-	disabled?: boolean;
-	helper?: string;
-}
-
-export type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink' | 'white' | 'custom';
-
-export interface DotType {
-	top?: boolean;
-	color?: string;
-}
-
-export interface drawerTransitionParamTypes {
-	amount?: number;
-	delay?: number;
-	duration?: number;
-	easing?: (t: number) => number;
-	opacity?: number;
-	x?: number;
-	y?: number;
-}
-
-export type drawerTransitionTypes =
-	| 'fade'
-	| 'fly'
-	| 'slide'
-	| 'blur'
-	| 'in:fly'
-	| 'out:fly'
-	| 'in:slide'
-	| 'out:slide'
-	| 'in:fade'
-	| 'out:fade'
-	| 'in:blur'
-	| 'out:blur'
-	| undefined;
-
-export interface DropdownType {
-	name: string;
-	href: string;
-	divider?: boolean;
-}
-
-export type FormColorType = 'blue' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'orange'
-
-export type Gradientduotones = 'purple2blue' | 'cyan2blue' | 'green2blue' | 'purple2pink' | 'pink2orange' | 'teal2lime' | 'red2yellow';
-
-export interface GroupTimelineType {
-	title: string | HTMLElement;
-	src: string;
-	alt: string;
-	href?: string;
-	isPrivate?: boolean;
-	comment?: string | HTMLElement;
-}
-
-export interface IconType {
-	name: typeof SvelteComponent;
-	size?: number;
-	color?: Colors;
-	class?: string;
-}
-export interface IconTabType {
-	name: typeof SvelteComponent;
-	active: boolean;
-	href: string;
-	rel?: string;
-	icon?: typeof SvelteComponent;
-	iconSize?: number;
-}
-
-export type ImgType = {
-	src: string;
-	alt?: string;
-};
-
-export type InputType = 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'reset' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | 'search';
-
-export interface InteractiveTabType {
-	name: string;
-	id: number;
-	active?: boolean,
-	disabled?: boolean,
-	icon?: typeof SvelteComponent,
-	iconSize?: number,
-	content: string | typeof SvelteComponent;
-}
-
-
-export interface ListGroupItemType {
-	current?: boolean;
-	disabled?: boolean;
-	href?: string;
-	[propName: string]: any;
-}
-
-export interface LinkType {
-	name: string;
-	href: string;
-	rel?: string;
-}
-
-export interface ListCardType {
-	img: ImgType;
-	field1: string;
-	field2?: string;
-	field3?: string;
-}
-
-export interface NavbarType {
-	name: string;
-	href: string;
-	rel?: string;
-	child?: NavbarType[];
-}
-
-export interface PageType {
-	pageNum: number;
-	href: string;
-}
-
-export declare const xs = 'xs'
-export declare const sm = 'sm'
-export declare const md = 'md'
-export declare const lg = 'lg'
-export declare const xl = 'xl'
-export declare type SizeType = typeof xs | typeof sm | typeof md | typeof lg | typeof xl;
-
-export declare type FormSizeType =  typeof sm | typeof md | typeof lg ;
-
-export interface PillTabType {
-	name: string;
-	selected: boolean;
-	href: string;
-}
-
-export type ReviewType = {
-	name: string;
-	imgSrc: string;
-	imgAlt: string;
-	address: string | undefined;
-	reviewDate: string | undefined;
-	title: string;
-	rating: number;
-	item1: string | undefined;
-	item2: string | undefined;
-	item3: string | undefined;
-}
-
-export type SelectOptionType = {
-	name: string;
-	value: string;
-};
-
-export type SidebarType = {
-	id: number;
-	name: string;
-	href?: string;
-	icon?: typeof SvelteComponent;
-	iconSize?: number;
-	iconClass?: string;
-	iconColor?: string;
-	rel?: string;
-	children?: SidebarType[];
-	subtext?: HTMLElement;
-};
-
-export type SidebarCtaType = {
-	label: string;
-	text: HTMLElement;
-};
-
-export interface SiteType {
-	name: string;
-	href: string;
-	img?: string;
-}
-
-export interface SocialMediaLinkType {
-	parent: string;
-	children?: LinkType[];
-}
-
-export interface SocialMediaType {
-	href: string;
-	icon: typeof SvelteComponent;
-	iconSize?: number;
-	iconClass?: string;
-}
-
-export interface TabHeadType {
-	name: string;
-	id: number;
-}
-
-export interface TabType {
-	name: string;
-	active: boolean;
-	href: string;
-	rel?: string;
-}
-
-export interface TableDataHelperType {
-	start: number;
-	end: number;
-	total: number
-}
-
-export type Textsize = 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'text-2xl' | 'text-3xl' | 'text-4xl';
-
-export interface TimelineItemType {
-	date: Date | string;
-	title: string;
-	icon?: typeof SvelteComponent;
-	href?: string;
-	linkname?: string;
-	text?: HTMLElement | string;
-}
-
-export interface TimelineItemVerticalType {
-	date: Date | string;
-	title: string;
-	icon?: typeof SvelteComponent;
-	iconSize?: number;
-	iconClass?: string;
-	href?: string;
-	linkname?: string;
-	text?: HTMLElement | string;
-}
-
-export interface TimelineItemHorizontalType {
-	date: Date | string;
-	title: string;
-	icon?: typeof SvelteComponent;
-	iconSize?: number;
-	iconClass?: string;
-	text?: HTMLElement | string;
-}
-
-export type ToggleColorType = 'blue' | 'red' | 'green' | 'purple' | 'yellow' | 'teal' | 'orange';
-
-export interface TransitionParamTypes {
-	delay?: number;
-	duration?: number;
-	easing?: (t: number) => number;
-	css?: (t: number, u: number) => string;
-	tick?: (t: number, u: number) => void;
-}
-
-export type TransitionTypes = 'fade' | 'fly' | 'slide' | 'blur' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur';

package/src/lib/typography/A.svelte

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

package/src/lib/typography/Blockquote.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-
-  export let border: boolean = false;
-  export let italic: boolean = true;
-  export let borderClass: string = 'border-l-4 border-gray-300 dark:border-gray-500';
-  export let bgClass: string = 'bg-gray-50 dark:bg-gray-800';
-  export let bg: boolean = false;
-  export let baseClass: string = 'font-semibold text-gray-900 dark:text-white';
-  export let alignment: 'left' | 'center' | 'right' = 'left';
-  let alignmentClasses = {
-    left: 'text-left',
-    center: 'text-center',
-    right: 'text-right'
-  };
-  export let size:
-    | 'xs'
-    | 'sm'
-    | 'base'
-    | 'lg'
-    | 'xl'
-    | '2xl'
-    | '3xl'
-    | '4xl'
-    | '5xl'
-    | '6xl'
-    | '7xl'
-    | '8xl'
-    | '9xl' = 'lg';
-  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'
-  };
-</script>
-
-<blockquote
-  {...$$restProps}
-  class={classNames(
-    baseClass,
-    alignmentClasses[alignment],
-    sizes[size],
-    bg && bgClass,
-    border && borderClass,
-    italic && 'italic',
-    $$props.class
-  )}>
-  <slot />
-</blockquote>

package/src/lib/typography/DescriptionList.svelte

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

package/src/lib/typography/Heading.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-
-  export let tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h1';
-  export let color: string = 'text-gray-900 dark:text-white';
-  export let customSize: string = '';
-  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}
-  {...$$restProps}
-  class={classNames(customSize ? customSize : textSizes[tag], color, 'w-full', $$props.class)}>
-  <slot />
-</svelte:element>

package/src/lib/typography/Hr.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-
-  export let icon: boolean = false;
-  export let width: string = 'w-full';
-  export let height: string = 'h-px';
-  export let divClass: string = 'inline-flex justify-center items-center w-full';
-  export let hrClass: string = 'bg-gray-200 rounded border-0 dark:bg-gray-700';
-  export let iconDivClass: string = 'absolute left-1/2 px-4 bg-white -translate-x-1/2 ';
-  export let textSpanClass: string =
-    'absolute left-1/2 px-3 font-medium text-gray-900 bg-white -translate-x-1/2 dark:text-white ';
-  export let middleBgColor: string = 'dark:bg-gray-900';
-
-  let horizontalClass: string = classNames(hrClass, width, height, $$props.class);
-  let classDiv = classNames(divClass, $$slots && 'relative', $$props.classDiv);
-  let middleClass = classNames(middleBgColor, icon ? iconDivClass : textSpanClass);
-</script>
-
-{#if $$slots}
-  <div {...$$restProps} class={classDiv}>
-    <hr class={horizontalClass} />
-    <div class={middleClass}>
-      <slot />
-    </div>
-  </div>
-{:else}
-  <hr class={horizontalClass} />
-{/if}

package/src/lib/typography/Img.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-
-  export let caption: string | undefined = undefined;
-  export let src: string | undefined = undefined;
-  export let srcset: string | undefined = undefined;
-  export let size: string = 'max-w-full';
-  export let alignment: string = '';
-  export let imgClass: string = 'h-auto';
-  export let figClass: string = 'max-w-lg';
-  export let alt: string = '';
-  export let effect: string = '';
-  export let captionClass: string = 'mt-2 text-sm text-center text-gray-500 dark:text-gray-400';
-</script>
-
-{#if caption}
-  <figure class={figClass}>
-    <img
-      class={classNames(imgClass, size, alignment, effect, $$props.class)}
-      {src}
-      {srcset}
-      {alt} />
-    <figcaption class={captionClass}>{@html caption}</figcaption>
-  </figure>
-{:else}
-  <img
-    {...$$restProps}
-    class={classNames(imgClass, size, alignment, effect, $$props.class)}
-    {src}
-    {srcset}
-    {alt} />
-{/if}

package/src/lib/typography/Layout.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-
-  export let divClass: string = 'grid';
-  export let cols: string = 'grid-cols-1 sm:grid-cols-2';
-  export let gap: number;
-  let classDiv = classNames(divClass, 'gap-' + String(gap), cols);
-</script>
-
-<div {...$$restProps} class={classDiv}>
-  <slot />
-</div>

package/src/lib/typography/Li.svelte

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

package/src/lib/typography/List.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-
-  export let tag: 'ul' | 'ol' | 'dl' = 'ul';
-  export let list: 'disc' | 'none' | 'decimal' = 'disc';
-  export let position: 'inside' | 'outside' = 'inside';
-  export let color: string = 'text-gray-500 dark:text-gray-400';
-  export let olClass: string = 'list-decimal list-inside';
-  export let ulClass: string = 'max-w-md';
-  export let dlClass: string = '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} {...$$restProps} class={classList}>
-  <slot />
-</svelte:element>

package/src/lib/typography/Mark.svelte

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

package/src/lib/typography/P.svelte

@@ -1,118 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-
-  export let color: string = 'text-gray-900 dark:text-white';
-  export let height: 'normal' | 'relaxed' | 'loose' = 'normal';
-  export let align: 'left' | 'center' | 'right' = 'left';
-  export let justify: boolean = false;
-  export let italic: boolean = false;
-  export let firstupper: boolean = false;
-  export let upperClass: string =
-    '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: number | undefined = undefined;
-  export let whitespace: 'normal' | 'nowrap' | 'pre' | 'preline' | 'prewrap' = 'normal';
-  export let size:
-    | 'xs'
-    | 'sm'
-    | 'base'
-    | 'lg'
-    | 'xl'
-    | '2xl'
-    | '3xl'
-    | '4xl'
-    | '5xl'
-    | '6xl'
-    | '7xl'
-    | '8xl'
-    | '9xl' = 'base';
-  export let space: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | undefined = undefined;
-  export let weight:
-    | 'thin'
-    | 'extralight'
-    | 'light'
-    | 'normal'
-    | 'medium'
-    | 'semibold'
-    | 'bold'
-    | 'extrabold'
-    | 'black' = 'normal';
-
-  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(' ');
-
-  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 {...$$restProps} class={classP}>
-  <slot />
-</p>

package/src/lib/typography/Secondary.svelte

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

package/src/lib/typography/Span.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-
-  export let italic: boolean = false;
-  export let underline: boolean = false;
-  export let linethrough: boolean = false;
-  export let uppercase: boolean = false;
-  export let gradient: boolean = false;
-  export let highlight: boolean = false;
-  export let highlightClass: string = 'text-blue-600 dark:text-blue-500';
-  export let decorationClass: string = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
-  export let gradientClass: string =
-    'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
-
-  let underlineClass = classNames('underline', decorationClass);
-  let classSpan: string = 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 {...$$restProps} class={classSpan}>
-  <slot />
-</span>