odj-svelte-ui 0.1.0

package/dist/elements/toolbar/Toolbar.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { ToolbarColorType } from '../types';
+  import { setContext, type ComponentProps } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { twMerge, twJoin } from 'tailwind-merge';
+  import Frame from '../utils/Frame.svelte';
+
+  interface $$Props extends ComponentProps<Frame> {
+    color: 'neutral' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'dark' | 'none';
+    embedded: boolean;
+  }
+
+  const separators = writable(false);
+  setContext('toolbar', separators);
+
+  export let color: ToolbarColorType = 'dark';
+  export let embedded: boolean = false;
+
+  let divClass: string;
+  $: divClass = twMerge('flex justify-between items-center', embedded || 'p-2', $$props.class);
+
+  const divideColors = {
+    neutral: 'divide-neutral-400 dark:divide-neutral-700',
+    red: 'divide-red-400 dark:divide-red-700',
+    yellow: 'divide-yellow-400 dark:divide-yellow-700',
+    green: 'divide-green-400 dark:divide-green-700',
+    indigo: 'divide-indigo-400 dark:divide-indigo-700',
+    purple: 'divide-purple-400 dark:divide-purple-700',
+    pink: 'divide-pink-400 dark:divide-pink-700',
+    blue: 'divide-blue-400 dark:divide-blue-700',
+    dark: 'divide-neutral-400 dark:divide-neutral-600',
+    none: ''
+  };
+
+  let separatorsClass: string;
+  $: separatorsClass = twJoin($separators && 'sm:divide-x', divideColors[color]);
+</script>
+
+<Frame {...$$restProps} class={divClass} color={embedded ? 'none' : color} rounded={!embedded}>
+  <div class="flex flex-wrap items-center {separatorsClass}">
+    <slot />
+  </div>
+  <slot name="end" />
+</Frame>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let color: ToolbarColorType = 'dark';
+@prop export let embedded: boolean = false;
+-->

package/dist/elements/toolbar/Toolbar.svelte.d.ts

@@ -0,0 +1,53 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let color: ToolbarColorType = 'dark';
+ * @prop export let embedded: boolean = false;
+ */
+declare const Toolbar: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<import("svelte/elements").HTMLAnchorAttributes & {
+    tag?: string;
+    color?: "primary" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink" | "dark" | "default" | "none" | "form" | "light" | "neutral" | "dropdown" | "navbar" | "navbarUl";
+    rounded?: boolean;
+    border?: boolean;
+    shadow?: boolean;
+    transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
+    params?: object;
+    node?: HTMLElement | undefined;
+    use?: import("svelte/action").Action<HTMLElement, any>;
+    options?: object;
+    class?: string;
+    role?: string;
+} & {
+    children?: any;
+} & {
+    color: "neutral" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "dark" | "none";
+    embedded: boolean;
+}, {
+    default: {};
+    end: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    end: {};
+}, {}, string>;
+type Toolbar = InstanceType<typeof Toolbar>;
+export default Toolbar;

package/dist/elements/toolbar/ToolbarButton.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { ToolbarButtonType } from '../types';
+  import { getContext } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+
+  const background = getContext('background');
+
+  export let color: ToolbarButtonType = 'default';
+  export let name: string | undefined = undefined;
+  export let ariaLabel: string | undefined = undefined;
+  export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
+  export let href: string | undefined = undefined;
+
+  const colors = {
+    dark: 'text-neutral-500 hover:text-neutral-900 hover:bg-neutral-200 dark:text-neutral-400 dark:hover:text-white dark:hover:bg-neutral-600',
+    neutral: 'text-neutral-500 focus-visible:ring-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-900 dark:hover:text-neutral-300',
+    red: 'text-red-500 focus-visible:ring-red-400 hover:bg-red-200 dark:hover:bg-red-900 dark:hover:text-red-300',
+    yellow: 'text-yellow-500 focus-visible:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-900 dark:hover:text-yellow-300',
+    green: 'text-green-500 focus-visible:ring-green-400 hover:bg-green-200 dark:hover:bg-green-900 dark:hover:text-green-300',
+    indigo: 'text-indigo-500 focus-visible:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-900 dark:hover:text-indigo-300',
+    purple: 'text-purple-500 focus-visible:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-900 dark:hover:text-purple-300',
+    pink: 'text-pink-500 focus-visible:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-900 dark:hover:text-pink-300',
+    blue: 'text-blue-500 focus-visible:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-900 dark:hover:text-blue-300',
+    primary: 'text-primary-500 focus-visible:ring-primary-400 hover:bg-primary-200 dark:hover:bg-primary-900 dark:hover:text-primary-300',
+    default: 'focus-visible:ring-neutral-400'
+  };
+
+  const sizing = {
+    xs: 'm-0.5 rounded-sm focus-visible:ring-1 p-0.5',
+    sm: 'm-0.5 rounded focus-visible:ring-1 p-0.5',
+    md: 'm-0.5 rounded-lg focus-visible:ring-2 p-1.5',
+    lg: 'm-0.5 rounded-lg focus-visible:ring-2 p-2.5'
+  };
+
+  let buttonClass: string;
+  $: buttonClass = twMerge('focus:outline-none whitespace-normal', sizing[size], colors[color], color === 'default' && (background ? 'hover:bg-neutral-100 dark:hover:bg-neutral-600' : 'hover:bg-neutral-100 dark:hover:bg-neutral-700'), $$props.class);
+
+  const svgSizes = {
+    xs: 'w-3 h-3',
+    sm: 'w-3.5 h-3.5',
+    md: 'w-5 h-5',
+    lg: 'w-5 h-5'
+  };
+</script>
+
+{#if href}
+  <a {href} {...$$restProps} class={buttonClass} aria-label={ariaLabel ?? name}>
+    {#if name}<span class="sr-only">{name}</span>{/if}
+    <slot svgSize={svgSizes[size]} />
+  </a>
+{:else}
+  <button on:click type="button" {...$$restProps} class={buttonClass} aria-label={ariaLabel ?? name}>
+    {#if name}<span class="sr-only">{name}</span>{/if}
+    <slot svgSize={svgSizes[size]} />
+  </button>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let color: ToolbarButtonType = 'default';
+@prop export let name: string | undefined = undefined;
+@prop export let ariaLabel: string | undefined = undefined;
+@prop export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
+@prop export let href: string | undefined = undefined;
+-->

package/dist/elements/toolbar/ToolbarButton.svelte.d.ts

@@ -0,0 +1,50 @@
+import type { ToolbarButtonType } from '../types';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let color: ToolbarButtonType = 'default';
+ * @prop export let name: string | undefined = undefined;
+ * @prop export let ariaLabel: string | undefined = undefined;
+ * @prop export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
+ * @prop export let href: string | undefined = undefined;
+ */
+declare const ToolbarButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    color?: ToolbarButtonType | undefined;
+    name?: string | undefined | undefined;
+    ariaLabel?: string | undefined | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | undefined;
+    href?: string | undefined | undefined;
+}, {
+    default: {
+        svgSize: string;
+    };
+}>, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        svgSize: string;
+    };
+}, {}, string>;
+type ToolbarButton = InstanceType<typeof ToolbarButton>;
+export default ToolbarButton;

package/dist/elements/toolbar/ToolbarGroup.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import type { Writable } from 'svelte/store';
+  import { getContext } from 'svelte';
+  export let divClass: string = 'flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0';
+
+  const options: Writable<boolean> = getContext('toolbar');
+  if (options) $options = true;
+</script>
+
+<div class={twMerge(divClass, $$props.class)}>
+  <slot />
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let divClass: string = 'flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0';
+-->

package/dist/elements/toolbar/ToolbarGroup.svelte.d.ts

@@ -0,0 +1,35 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let divClass: string = 'flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0';
+ */
+declare const ToolbarGroup: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    divClass?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type ToolbarGroup = InstanceType<typeof ToolbarGroup>;
+export default ToolbarGroup;

package/dist/elements/tooltip/Tooltip.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import Popper from '../utils/Popper.svelte';
+  import { twMerge } from 'tailwind-merge';
+
+  // propagate props type from underlying Frame
+  interface $$Props extends ComponentProps<Popper> {
+    type?: 'dark' | 'light' | 'auto' | 'custom';
+    defaultClass?: string;
+  }
+
+  export let type: 'dark' | 'light' | 'auto' | 'custom' = 'dark';
+  export let defaultClass: string = 'py-2 px-3 text-sm font-medium';
+
+  const types = {
+    dark: 'bg-neutral-900 text-white dark:bg-neutral-700',
+    light: 'border-neutral-200 bg-white text-neutral-900',
+    auto: ' bg-white text-neutral-900 dark:bg-neutral-700 dark:text-white border-neutral-200 dark:border-neutral-700',
+    custom: ''
+  };
+
+  let toolTipClass: string;
+  $: {
+    if ($$restProps.color) type = 'custom';
+    else $$restProps.color = 'none';
+
+    if (['light', 'auto'].includes(type)) $$restProps.border = true;
+    toolTipClass = twMerge('tooltip', defaultClass, types[type], $$props.class);
+  }
+</script>
+
+<Popper rounded shadow {...$$restProps} class={toolTipClass} on:show>
+  <slot />
+</Popper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let type: 'dark' | 'light' | 'auto' | 'custom' = 'dark';
+@prop export let defaultClass: string = 'py-2 px-3 text-sm font-medium';
+-->

package/dist/elements/tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,66 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let type: 'dark' | 'light' | 'auto' | 'custom' = 'dark';
+ * @prop export let defaultClass: string = 'py-2 px-3 text-sm font-medium';
+ */
+declare const Tooltip: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<import("svelte/elements").HTMLAnchorAttributes & {
+    tag?: string;
+    color?: "primary" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink" | "dark" | "default" | "none" | "form" | "light" | "neutral" | "dropdown" | "navbar" | "navbarUl";
+    rounded?: boolean;
+    border?: boolean;
+    shadow?: boolean;
+    transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
+    params?: object;
+    node?: HTMLElement | undefined;
+    use?: import("svelte/action").Action<HTMLElement, any>;
+    options?: object;
+    class?: string;
+    role?: string;
+} & {
+    children?: any;
+} & {
+    activeContent?: boolean;
+    arrow?: boolean;
+    offset?: number;
+    placement?: import("@floating-ui/utils").Placement;
+    trigger?: "hover" | "click";
+    triggeredBy?: string;
+    reference?: string;
+    strategy?: "absolute" | "fixed";
+    open?: boolean;
+    yOnly?: boolean;
+} & {
+    children?: any;
+} & {
+    type?: "dark" | "light" | "auto" | "custom";
+    defaultClass?: string;
+}, {
+    default: {};
+}>, {
+    show: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Tooltip = InstanceType<typeof Tooltip>;
+export default Tooltip;

package/dist/elements/types.d.ts

@@ -0,0 +1,111 @@
+export type BlockQuoteType = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
+export type ButtonType = 'button' | 'submit' | 'reset';
+export type ButtonColorType = 'alternative' | 'blue' | 'dark' | 'green' | 'light' | 'primary' | 'purple' | 'red' | 'yellow' | 'none';
+export type Colors = 'blue' | 'neutral' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink' | 'white' | 'custom' | 'primary' | 'secondary';
+export type ImgType = {
+    src: string;
+    alt?: string;
+};
+export type IndicatorColorType = 'neutral' | 'dark' | 'blue' | 'green' | 'red' | 'purple' | 'indigo' | 'yellow' | 'teal' | 'none';
+export type IndicatorPlacementType = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | undefined;
+export type InputType = 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'reset' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | 'search';
+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 type FormColorType = 'blue' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'orange' | 'primary' | 'secondary';
+export type ModalPlacementType = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export type PsizeType = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
+export type PweightType = 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
+export type TableColorType = 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'indigo' | 'pink' | 'default' | 'custom';
+export type ToolbarColorType = 'neutral' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'dark' | 'none';
+export type ToolbarButtonType = 'dark' | 'default' | 'neutral' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue';
+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 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<T> = {
+    name: string | number;
+    value: T;
+};
+export type TransitionTypes = 'fade' | 'fly' | 'slide' | 'blur' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur';
+export interface ActivityType {
+    title: HTMLElement | string;
+    date: Date | string;
+    src: string;
+    alt: string;
+    text?: HTMLElement | string;
+}
+export interface drawerTransitionParamTypes {
+    amount?: number;
+    delay?: number;
+    duration?: number;
+    easing?: (t: number) => number;
+    opacity?: number;
+    x?: number;
+    y?: number;
+}
+export interface Dismissable {
+    dismissable?: boolean;
+}
+export interface GroupTimelineType {
+    title: string | HTMLElement;
+    src: string;
+    alt: string;
+    href?: string;
+    isPrivate?: boolean;
+    comment?: string | HTMLElement;
+}
+export interface ListGroupItemType {
+    current?: boolean;
+    disabled?: boolean;
+    href?: string;
+    [propName: string]: any;
+}
+export interface LinkType {
+    name: string;
+    href?: string;
+    rel?: string;
+    active?: boolean;
+}
+export interface NavbarType {
+    name: string;
+    href: string;
+    rel?: string;
+    child?: NavbarType[];
+}
+export interface SiteType {
+    name: string;
+    href: string;
+    img?: string;
+}
+export interface TransitionParamTypes {
+    delay?: number;
+    duration?: number;
+    easing?: (t: number) => number;
+    css?: (t: number, u: number) => string;
+    tick?: (t: number, u: number) => void;
+}
+export interface ButtonClassesTypes {
+    default?: string;
+    border?: string;
+    application?: string;
+    pagination?: string;
+    group?: string;
+    card?: string;
+    meeting?: string;
+    video?: string;
+    custom?: string;
+}

package/dist/elements/types.js

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

package/dist/elements/typography/A.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let href: string = '#';
+  export let color: string = 'text-primary-600 dark:text-primary-500';
+  export let aClass: string = 'inline-flex items-center hover:underline';
+</script>
+
+<a {...$$restProps} {href} class={twMerge(aClass, color, $$props.class)} on:click>
+  <slot />
+</a>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let href: string = '#';
+@prop export let color: string = 'text-primary-600 dark:text-primary-500';
+@prop export let aClass: string = 'inline-flex items-center hover:underline';
+-->

package/dist/elements/typography/A.svelte.d.ts

@@ -0,0 +1,41 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let href: string = '#';
+ * @prop export let color: string = 'text-primary-600 dark:text-primary-500';
+ * @prop export let aClass: string = 'inline-flex items-center hover:underline';
+ */
+declare const A: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    href?: string | undefined;
+    color?: string | undefined;
+    aClass?: string | undefined;
+}, {
+    default: {};
+}>, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type A = InstanceType<typeof A>;
+export default A;

package/dist/elements/typography/Blockquote.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import type { BlockQuoteType } from '../types';
+
+  export let border: boolean = false;
+  export let italic: boolean = true;
+  export let borderClass: string = 'border-l-4 border-neutral-300 dark:border-neutral-500';
+  export let bgClass: string = 'bg-neutral-50 dark:bg-neutral-800';
+  export let bg: boolean = false;
+  export let baseClass: string = 'font-semibold text-neutral-900 dark:text-white';
+  export let alignment: 'left' | 'center' | 'right' = 'left';
+  export let size: BlockQuoteType = 'lg';
+  let alignmentClasses = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right'
+  };
+  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={twMerge(baseClass, alignmentClasses[alignment], sizes[size], bg && bgClass, border && borderClass, italic && 'italic', $$props.class)}>
+  <slot />
+</blockquote>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let border: boolean = false;
+@prop export let italic: boolean = true;
+@prop export let borderClass: string = 'border-l-4 border-neutral-300 dark:border-neutral-500';
+@prop export let bgClass: string = 'bg-neutral-50 dark:bg-neutral-800';
+@prop export let bg: boolean = false;
+@prop export let baseClass: string = 'font-semibold text-neutral-900 dark:text-white';
+@prop export let alignment: 'left' | 'center' | 'right' = 'left';
+@prop export let size: BlockQuoteType = 'lg';
+-->

package/dist/elements/typography/Blockquote.svelte.d.ts

@@ -0,0 +1,50 @@
+import type { BlockQuoteType } from '../types';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let border: boolean = false;
+ * @prop export let italic: boolean = true;
+ * @prop export let borderClass: string = 'border-l-4 border-neutral-300 dark:border-neutral-500';
+ * @prop export let bgClass: string = 'bg-neutral-50 dark:bg-neutral-800';
+ * @prop export let bg: boolean = false;
+ * @prop export let baseClass: string = 'font-semibold text-neutral-900 dark:text-white';
+ * @prop export let alignment: 'left' | 'center' | 'right' = 'left';
+ * @prop export let size: BlockQuoteType = 'lg';
+ */
+declare const Blockquote: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    border?: boolean | undefined;
+    italic?: boolean | undefined;
+    borderClass?: string | undefined;
+    bgClass?: string | undefined;
+    bg?: boolean | undefined;
+    baseClass?: string | undefined;
+    alignment?: "left" | "center" | "right" | undefined;
+    size?: BlockQuoteType | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Blockquote = InstanceType<typeof Blockquote>;
+export default Blockquote;