flowbite-svelte 0.48.4 → 1.0.0-next.2

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type BlockquoteProps_ = typeof __propDef.props;
+export { BlockquoteProps_ as BlockquoteProps };
+export type BlockquoteEvents = typeof __propDef.events;
+export type BlockquoteSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:class: string;
+ * @props:border: any;
+ * @props:italic: any = true;
+ * @props:bg: any;
+ * @props:alignment: any = "left";
+ * @props:size: any = "lg";
+ */
+export default class Blockquote extends SvelteComponentTyped<BlockquoteProps_, BlockquoteEvents, BlockquoteSlots> {
+}

package/dist/typography/blockquote/index.d.ts

@@ -0,0 +1,4 @@
+import type { BlockquoteProps } from "./type";
+import Blockquote from "./Blockquote.svelte";
+import { blockquote } from "./theme";
+export { Blockquote, blockquote, type BlockquoteProps };

package/dist/typography/blockquote/index.js

@@ -0,0 +1,3 @@
+import Blockquote from "./Blockquote.svelte";
+import { blockquote } from "./theme";
+export { Blockquote, blockquote };

package/dist/typography/blockquote/theme.d.ts

@@ -0,0 +1,102 @@
+import { type VariantProps } from "tailwind-variants";
+export type BlockquoteVariants = VariantProps<typeof blockquote>;
+export declare const blockquote: import("tailwind-variants").TVReturnType<{
+    border: {
+        true: string;
+        false: string;
+    };
+    italic: {
+        true: string;
+        false: string;
+    };
+    bg: {
+        true: string;
+        false: string;
+    };
+    alignment: {
+        left: string;
+        center: string;
+        right: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+}, undefined, "font-semibold text-gray-900 dark:text-white", {
+    border: {
+        true: string;
+        false: string;
+    };
+    italic: {
+        true: string;
+        false: string;
+    };
+    bg: {
+        true: string;
+        false: string;
+    };
+    alignment: {
+        left: string;
+        center: string;
+        right: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    border: {
+        true: string;
+        false: string;
+    };
+    italic: {
+        true: string;
+        false: string;
+    };
+    bg: {
+        true: string;
+        false: string;
+    };
+    alignment: {
+        left: string;
+        center: string;
+        right: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+}, undefined, "font-semibold text-gray-900 dark:text-white", unknown, unknown, undefined>>;

package/dist/typography/blockquote/theme.js

@@ -0,0 +1,45 @@
+import { tv } from "tailwind-variants";
+export const blockquote = tv({
+    base: "font-semibold text-gray-900 dark:text-white",
+    variants: {
+        border: {
+            true: "border-s-4 border-gray-300 dark:border-gray-500",
+            false: ""
+        },
+        italic: {
+            true: "italic",
+            false: ""
+        },
+        bg: {
+            true: "bg-gray-50 dark:bg-gray-800",
+            false: ""
+        },
+        alignment: {
+            left: "text-left",
+            center: "text-center",
+            right: "text-right"
+        },
+        size: {
+            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"
+        }
+    },
+    defaultVariants: {
+        border: false,
+        italic: true,
+        bg: false,
+        alignment: "left",
+        size: "lg"
+    }
+});

package/dist/typography/blockquote/type.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+import type { HTMLBlockquoteAttributes } from "svelte/elements";
+import type { BlockquoteVariants } from "./theme";
+interface BlockquoteProps extends HTMLBlockquoteAttributes {
+    children: Snippet;
+    border?: boolean;
+    italic?: boolean;
+    bg?: boolean;
+    alignment?: BlockquoteVariants["alignment"];
+    size?: BlockquoteVariants["size"];
+}
+export { type BlockquoteProps };

package/dist/typography/blockquote/type.js

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

package/dist/typography/descriptionlist/DescriptionList.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { type DescriptionListProps as Props, descriptionList } from "./index";
+
+  let { children, tag, class: className, ...restProps }: Props = $props();
+
+  let classDesc = $derived(
+    descriptionList({
+      tag,
+      class: clsx(className)
+    })
+  );
+</script>
+
+<svelte:element this={tag} {...restProps} class={classDesc}>
+  {@render children()}
+</svelte:element>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: children: any;
+@props:tag: any;
+@props:class: string;
+-->

package/dist/typography/descriptionlist/DescriptionList.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type DescriptionListProps_ = typeof __propDef.props;
+export { DescriptionListProps_ as DescriptionListProps };
+export type DescriptionListEvents = typeof __propDef.events;
+export type DescriptionListSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:tag: any;
+ * @props:class: string;
+ */
+export default class DescriptionList extends SvelteComponentTyped<DescriptionListProps_, DescriptionListEvents, DescriptionListSlots> {
+}

package/dist/typography/descriptionlist/index.d.ts

@@ -0,0 +1,4 @@
+import type { DescriptionListProps } from "./type";
+import DescriptionList from "./DescriptionList.svelte";
+import { descriptionList } from "./theme";
+export { DescriptionList, descriptionList, type DescriptionListProps };

package/dist/typography/descriptionlist/index.js

@@ -0,0 +1,3 @@
+import DescriptionList from "./DescriptionList.svelte";
+import { descriptionList } from "./theme";
+export { DescriptionList, descriptionList };

package/dist/typography/descriptionlist/theme.d.ts

@@ -0,0 +1,18 @@
+import { type VariantProps } from "tailwind-variants";
+export type DescriptionListVariants = VariantProps<typeof descriptionList>;
+export declare const descriptionList: import("tailwind-variants").TVReturnType<{
+    tag: {
+        dt: string;
+        dd: string;
+    };
+}, undefined, undefined, {
+    tag: {
+        dt: string;
+        dd: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    tag: {
+        dt: string;
+        dd: string;
+    };
+}, undefined, undefined, unknown, unknown, undefined>>;

package/dist/typography/descriptionlist/theme.js

@@ -0,0 +1,12 @@
+import { tv } from "tailwind-variants";
+export const descriptionList = tv({
+    variants: {
+        tag: {
+            dt: "text-gray-500 md:text-lg dark:text-gray-400",
+            dd: "text-lg font-semibold"
+        }
+    },
+    defaultVariants: {
+        tag: "dt"
+    }
+});

package/dist/typography/descriptionlist/type.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { DescriptionListVariants } from "./theme";
+interface DescriptionListProps extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+    tag: DescriptionListVariants["tag"];
+}
+export { type DescriptionListProps };

package/dist/typography/descriptionlist/type.js

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

package/dist/typography/heading/Heading.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { type HeadingProps as Props, heading } from "./index";
+
+  let { children, tag = "h1", class: className, ...restProps }: Props = $props();
+
+  let headingClass = $derived(heading({ tag, class: clsx(className) }));
+</script>
+
+<svelte:element this={tag} {...restProps} class={headingClass}>
+  {@render children()}
+</svelte:element>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: children: any;
+@props:tag: any = "h1";
+@props:class: string;
+-->

package/dist/typography/heading/Heading.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type HeadingProps_ = typeof __propDef.props;
+export { HeadingProps_ as HeadingProps };
+export type HeadingEvents = typeof __propDef.events;
+export type HeadingSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:tag: any = "h1";
+ * @props:class: string;
+ */
+export default class Heading extends SvelteComponentTyped<HeadingProps_, HeadingEvents, HeadingSlots> {
+}

package/dist/typography/heading/index.d.ts

@@ -0,0 +1,4 @@
+import type { HeadingProps } from "./type";
+import Heading from "./Heading.svelte";
+import { heading } from "./theme";
+export { Heading, heading, type HeadingProps };

package/dist/typography/heading/index.js

@@ -0,0 +1,3 @@
+import Heading from "./Heading.svelte";
+import { heading } from "./theme";
+export { Heading, heading };

package/dist/typography/heading/theme.d.ts

@@ -0,0 +1,30 @@
+import { type VariantProps } from "tailwind-variants";
+export type HeadingVariants = VariantProps<typeof heading>;
+export declare const heading: import("tailwind-variants").TVReturnType<{
+    tag: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}, undefined, "font-bold text-gray-900 dark:text-white", {
+    tag: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    tag: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}, undefined, "font-bold text-gray-900 dark:text-white", unknown, unknown, undefined>>;

package/dist/typography/heading/theme.js

@@ -0,0 +1,17 @@
+import { tv } from "tailwind-variants";
+export const heading = tv({
+    base: "font-bold text-gray-900 dark:text-white",
+    variants: {
+        tag: {
+            h1: "text-5xl font-extrabold",
+            h2: "text-4xl",
+            h3: "text-3xl",
+            h4: "text-2xl",
+            h5: "text-xl",
+            h6: "text-lg"
+        }
+    },
+    defaultVariants: {
+        tag: "h1"
+    }
+});

package/dist/typography/heading/type.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { HeadingVariants } from "./theme";
+interface HeadingProps extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+    tag?: HeadingVariants["tag"];
+}
+export { type HeadingProps };

package/dist/typography/heading/type.js

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

package/dist/typography/hr/Hr.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { type HrProps as Props, hr } from "./index";
+
+  let { children, divClass, class: className, innerDivClass, ...restProps }: Props = $props();
+
+  let { base, container, content } = $derived(hr({ withChildren: !!children }));
+</script>
+
+{#if children}
+  <div {...restProps} class={container({ class: divClass })}>
+    <hr class={base({ class: clsx(className) })} />
+    <div class={content({ class: innerDivClass })}>
+      {@render children()}
+    </div>
+  </div>
+{:else}
+  <hr class={base({ class: clsx(className) })} {...restProps} />
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: children: any;
+@props:divClass: any;
+@props:class: string;
+@props:innerDivClass: any;
+-->

package/dist/typography/hr/Hr.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type HrProps_ = typeof __propDef.props;
+export { HrProps_ as HrProps };
+export type HrEvents = typeof __propDef.events;
+export type HrSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:divClass: any;
+ * @props:class: string;
+ * @props:innerDivClass: any;
+ */
+export default class Hr extends SvelteComponentTyped<HrProps_, HrEvents, HrSlots> {
+}

package/dist/typography/hr/index.d.ts

@@ -0,0 +1,4 @@
+import type { HrProps } from "./type";
+import Hr from "./Hr.svelte";
+import { hr } from "./theme";
+export { Hr, hr, type HrProps };

package/dist/typography/hr/index.js

@@ -0,0 +1,3 @@
+import Hr from "./Hr.svelte";
+import { hr } from "./theme";
+export { Hr, hr };

package/dist/typography/hr/theme.d.ts

@@ -0,0 +1,34 @@
+export declare const hr: import("tailwind-variants").TVReturnType<{
+    withChildren: {
+        true: {
+            base: string;
+            container: string;
+        };
+    };
+}, {
+    base: string;
+    container: string;
+    content: string;
+}, undefined, {
+    withChildren: {
+        true: {
+            base: string;
+            container: string;
+        };
+    };
+}, {
+    base: string;
+    container: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<{
+    withChildren: {
+        true: {
+            base: string;
+            container: string;
+        };
+    };
+}, {
+    base: string;
+    container: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/typography/hr/theme.js

@@ -0,0 +1,19 @@
+import { tv } from "tailwind-variants";
+export const hr = tv({
+    slots: {
+        base: "h-px my-8 bg-gray-200 border-0 dark:bg-gray-700",
+        container: "inline-flex items-center justify-center w-full",
+        content: "absolute px-4 -translate-x-1/2 rtl:translate-x-1/2 bg-white start-1/2 dark:bg-gray-900"
+    },
+    variants: {
+        withChildren: {
+            true: {
+                base: "w-full",
+                container: "relative"
+            }
+        }
+    },
+    defaultVariants: {
+        withChildren: false
+    }
+});

package/dist/typography/hr/type.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+interface HrProps extends HTMLAttributes<HTMLElement> {
+    children?: Snippet;
+    divClass?: string;
+    iconDivClass?: string;
+    textSpanClass?: string;
+    innerDivClass?: string;
+}
+export { type HrProps };

package/dist/typography/hr/type.js

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

package/dist/typography/img/EnhancedImg.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { type EnhandedImgProps as Props, img } from ".";
+  let { src, href, caption, size, figClass, class: imgClass, captionClass, ...restProps }: Props = $props();
+
+  let { base, figure, figureCaption } = $derived(img({ size }));
+</script>
+
+{#snippet imageSlot()}
+  {#if caption}
+    <figure class={figure({ class: figClass })}>
+      <enhanced:img {src} {...restProps} class={base({ class: clsx(imgClass) })} />
+      <figcaption class={figureCaption({ class: captionClass })}>
+        {@html caption}
+      </figcaption>
+    </figure>
+  {:else}
+    <enhanced:img {src} {...restProps} class={base({ class: clsx(imgClass) })} />
+  {/if}
+{/snippet}
+
+{#if href}
+  <a {href}>
+    {@render imageSlot()}
+  </a>
+{:else}
+  {@render imageSlot()}
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: src: any;
+@props:href: any;
+@props:caption: any;
+@props:size: any;
+@props:figClass: any;
+@props:class: string;
+@props:captionClass: any;
+-->

package/dist/typography/img/EnhancedImg.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EnhancedImgProps = typeof __propDef.props;
+export type EnhancedImgEvents = typeof __propDef.events;
+export type EnhancedImgSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: src: any;
+ * @props:href: any;
+ * @props:caption: any;
+ * @props:size: any;
+ * @props:figClass: any;
+ * @props:class: string;
+ * @props:captionClass: any;
+ */
+export default class EnhancedImg extends SvelteComponentTyped<EnhancedImgProps, EnhancedImgEvents, EnhancedImgSlots> {
+}
+export {};

package/dist/typography/img/Img.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { type ImgProps as Props, img } from "./index";
+
+  let { size = "none", effect = "none", caption, class: imgClass, figClass, captionClass, href, ...restProps }: Props = $props();
+
+  let { base, figure, figureCaption } = $derived(img({ size, effect }));
+</script>
+
+{#snippet imageSlot()}
+  {#if caption}
+    <figure class={figure({ class: figClass })}>
+      <img {...restProps} class={base({ class: clsx(imgClass) })} />
+      <figcaption class={figureCaption({ class: captionClass })}>
+        {@html caption}
+      </figcaption>
+    </figure>
+  {:else}
+    <img {...restProps} class={base({ class: clsx(imgClass) })} />
+  {/if}
+{/snippet}
+
+{#if href}
+  <a {href}>
+    {@render imageSlot()}
+  </a>
+{:else}
+  {@render imageSlot()}
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: size: any = "none";
+@props:effect: any = "none";
+@props:caption: any;
+@props:class: string;
+@props:figClass: any;
+@props:captionClass: any;
+@props:href: any;
+-->