flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/typography/img/Img.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 ImgProps_ = typeof __propDef.props;
+export { ImgProps_ as ImgProps };
+export type ImgEvents = typeof __propDef.events;
+export type ImgSlots = typeof __propDef.slots;
+/**
+ * [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;
+ */
+export default class Img extends SvelteComponentTyped<ImgProps_, ImgEvents, ImgSlots> {
+}

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

@@ -0,0 +1,5 @@
+import type { ImgProps, EnhandedImgProps } from "./type";
+import Img from "./Img.svelte";
+import EnhancedImg from "./EnhancedImg.svelte";
+import { img } from "./theme";
+export { Img, img, type ImgProps, EnhancedImg, type EnhandedImgProps };

package/dist/typography/img/index.js

@@ -0,0 +1,4 @@
+import Img from "./Img.svelte";
+import EnhancedImg from "./EnhancedImg.svelte";
+import { img } from "./theme";
+export { Img, img, EnhancedImg };

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

@@ -0,0 +1,189 @@
+import { type VariantProps } from "tailwind-variants";
+export type ImgVariants = VariantProps<typeof img>;
+export declare const img: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            base: string;
+            figure: string;
+        };
+        sm: {
+            base: string;
+            figure: string;
+        };
+        md: {
+            base: string;
+            figure: string;
+        };
+        lg: {
+            base: string;
+            figure: string;
+        };
+        xl: {
+            base: string;
+            figure: string;
+        };
+        "2xl": {
+            base: string;
+            figure: string;
+        };
+        full: {
+            base: string;
+            figure: string;
+        };
+        none: {
+            base: string;
+            figure: string;
+        };
+    };
+    effect: {
+        grayscale: {
+            base: string;
+        };
+        blur: {
+            base: string;
+        };
+        invert: {
+            base: string;
+        };
+        sepia: {
+            base: string;
+        };
+        saturate: {
+            base: string;
+        };
+        "hue-rotate": {
+            base: string;
+        };
+        none: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    figure: string;
+    figureCaption: string;
+}, undefined, {
+    size: {
+        xs: {
+            base: string;
+            figure: string;
+        };
+        sm: {
+            base: string;
+            figure: string;
+        };
+        md: {
+            base: string;
+            figure: string;
+        };
+        lg: {
+            base: string;
+            figure: string;
+        };
+        xl: {
+            base: string;
+            figure: string;
+        };
+        "2xl": {
+            base: string;
+            figure: string;
+        };
+        full: {
+            base: string;
+            figure: string;
+        };
+        none: {
+            base: string;
+            figure: string;
+        };
+    };
+    effect: {
+        grayscale: {
+            base: string;
+        };
+        blur: {
+            base: string;
+        };
+        invert: {
+            base: string;
+        };
+        sepia: {
+            base: string;
+        };
+        saturate: {
+            base: string;
+        };
+        "hue-rotate": {
+            base: string;
+        };
+        none: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    figure: string;
+    figureCaption: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            base: string;
+            figure: string;
+        };
+        sm: {
+            base: string;
+            figure: string;
+        };
+        md: {
+            base: string;
+            figure: string;
+        };
+        lg: {
+            base: string;
+            figure: string;
+        };
+        xl: {
+            base: string;
+            figure: string;
+        };
+        "2xl": {
+            base: string;
+            figure: string;
+        };
+        full: {
+            base: string;
+            figure: string;
+        };
+        none: {
+            base: string;
+            figure: string;
+        };
+    };
+    effect: {
+        grayscale: {
+            base: string;
+        };
+        blur: {
+            base: string;
+        };
+        invert: {
+            base: string;
+        };
+        sepia: {
+            base: string;
+        };
+        saturate: {
+            base: string;
+        };
+        "hue-rotate": {
+            base: string;
+        };
+        none: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    figure: string;
+    figureCaption: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/typography/img/theme.js

@@ -0,0 +1,41 @@
+import { tv } from "tailwind-variants";
+export const img = tv({
+    slots: {
+        base: "max-w-full h-auto",
+        figure: "",
+        figureCaption: "mt-2 text-sm text-center text-gray-500 dark:text-gray-400"
+    },
+    variants: {
+        size: {
+            xs: { base: "max-w-xs", figure: "max-w-xs" },
+            sm: { base: "max-w-sm", figure: "max-w-sm" },
+            md: { base: "max-w-md", figure: "max-w-md" },
+            lg: { base: "max-w-lg", figure: "max-w-lg" },
+            xl: { base: "max-w-xl", figure: "max-w-xl" },
+            "2xl": { base: "max-w-2xl", figure: "max-w-2xl" },
+            full: { base: "max-w-full", figure: "max-w-full" },
+            none: { base: "", figure: "" }
+        },
+        effect: {
+            grayscale: {
+                base: "cursor-pointer rounded-lg grayscale filter transition-all duration-300 hover:grayscale-0"
+            },
+            blur: { base: "blur-xs transition-all duration-300 hover:blur-none" },
+            invert: {
+                base: "invert filter transition-all duration-300 hover:invert-0"
+            },
+            sepia: {
+                base: "sepia filter transition-all duration-300 hover:sepia-0"
+            },
+            saturate: {
+                base: "saturate-50 filter transition-all duration-300 hover:saturate-100"
+            },
+            "hue-rotate": {
+                base: "hue-rotate-60 filter transition-all duration-300 hover:hue-rotate-0"
+            },
+            none: {
+                base: "transition-all duration-300"
+            }
+        }
+    }
+});

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

@@ -0,0 +1,25 @@
+import type { HTMLImgAttributes } from "svelte/elements";
+import type { Picture } from "vite-imagetools";
+import type { ImgVariants } from "./theme";
+type EnhancedImgAttributes = Omit<HTMLImgAttributes, "src"> & {
+    src: string | Picture;
+};
+interface ImgProps extends HTMLImgAttributes {
+    size?: ImgVariants["size"];
+    effect?: ImgVariants["effect"];
+    caption?: string;
+    figClass?: string;
+    captionClass?: string;
+    href?: HTMLAnchorElement["href"];
+}
+interface EnhandedImgProps extends EnhancedImgAttributes {
+    size?: ImgVariants["size"];
+    multiple?: boolean;
+    transform?: string;
+    effect?: ImgVariants["effect"];
+    caption?: string;
+    figClass?: string;
+    captionClass?: string;
+    href?: HTMLAnchorElement["href"];
+}
+export { type ImgProps, type EnhandedImgProps };

package/dist/typography/img/type.js

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

package/dist/typography/layout/Layout.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { type LayoutProps as Props, layout } from "./index";
+
+  let { children, class: className, ...restProps }: Props = $props();
+
+  let classDiv = $derived(layout({ className }));
+</script>
+
+<div {...restProps} class={classDiv}>
+  {@render children()}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: children: any;
+@props:class: string;
+-->

package/dist/typography/layout/Layout.svelte.d.ts

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

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

@@ -0,0 +1,4 @@
+import type { LayoutProps } from "./type";
+import Layout from "./Layout.svelte";
+import { layout } from "./theme";
+export { Layout, layout, type LayoutProps };

package/dist/typography/layout/index.js

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

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

@@ -0,0 +1 @@
+export declare const layout: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "grid grid-cols-1 sm:grid-cols-2", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "grid grid-cols-1 sm:grid-cols-2", unknown, unknown, undefined>>;

package/dist/typography/layout/theme.js

@@ -0,0 +1,4 @@
+import { tv } from "tailwind-variants";
+export const layout = tv({
+    base: "grid grid-cols-1 sm:grid-cols-2"
+});

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

@@ -0,0 +1,6 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+interface LayoutProps extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+}
+export { type LayoutProps };

package/dist/typography/layout/type.js

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

package/dist/typography/list/Li.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { twMerge } from "tailwind-merge";
+  import { getContext } from "svelte";
+  import { type LiProps as Props } from "./index";
+  import clsx from "clsx";
+
+  let { children, icon, class: className, ...restProps }: Props = $props();
+
+  const getCtxClass = getContext<() => string>("ctxClass");
+
+  let liCls = $derived(twMerge(getCtxClass(), icon && "flex items-center", clsx(className)));
+</script>
+
+<li {...restProps} class={liCls}>
+  {@render children()}
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: children: any;
+@props:icon: any;
+@props:class: string;
+-->

package/dist/typography/list/Li.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 LiProps_ = typeof __propDef.props;
+export { LiProps_ as LiProps };
+export type LiEvents = typeof __propDef.events;
+export type LiSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:icon: any;
+ * @props:class: string;
+ */
+export default class Li extends SvelteComponentTyped<LiProps_, LiEvents, LiSlots> {
+}

package/dist/typography/list/List.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { type ListProps as Props, list } from "./index";
+  import clsx from "clsx";
+
+  let { children, tag = "ul", isContenteditable = false, position = "inside", ctxClass, class: className, ...restProps }: Props = $props();
+
+  let contextClass = $state(ctxClass || "");
+
+  setContext("ctxClass", () => contextClass);
+
+  $effect(() => {
+    contextClass = ctxClass || "";
+  });
+
+  let classList = $derived(list({ position, tag, class: clsx(className) }));
+</script>
+
+<svelte:element this={tag} {...restProps} class={classList} contenteditable={isContenteditable}>
+  {@render children()}
+</svelte:element>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: children: any;
+@props:tag: any = "ul";
+@props:isContenteditable: any = false;
+@props:position: any = "inside";
+@props:ctxClass: any;
+@props:class: string;
+-->

package/dist/typography/list/List.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type ListProps_ = typeof __propDef.props;
+export { ListProps_ as ListProps };
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:tag: any = "ul";
+ * @props:isContenteditable: any = false;
+ * @props:position: any = "inside";
+ * @props:ctxClass: any;
+ * @props:class: string;
+ */
+export default class List extends SvelteComponentTyped<ListProps_, ListEvents, ListSlots> {
+}

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

@@ -0,0 +1,5 @@
+import type { ListProps, LiProps } from "./type";
+import List from "./List.svelte";
+import Li from "./Li.svelte";
+import { list } from "./theme";
+export { List, Li, list, type ListProps, type LiProps };

package/dist/typography/list/index.js

@@ -0,0 +1,4 @@
+import List from "./List.svelte";
+import Li from "./Li.svelte";
+import { list } from "./theme";
+export { List, Li, list };

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

@@ -0,0 +1,33 @@
+import { type VariantProps } from "tailwind-variants";
+export type ListVariants = VariantProps<typeof list>;
+export declare const list: import("tailwind-variants").TVReturnType<{
+    tag: {
+        ul: string;
+        dl: string;
+        ol: string;
+    };
+    position: {
+        inside: string;
+        outside: string;
+    };
+}, undefined, "", {
+    tag: {
+        ul: string;
+        dl: string;
+        ol: string;
+    };
+    position: {
+        inside: string;
+        outside: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    tag: {
+        ul: string;
+        dl: string;
+        ol: string;
+    };
+    position: {
+        inside: string;
+        outside: string;
+    };
+}, undefined, "", unknown, unknown, undefined>>;

package/dist/typography/list/theme.js

@@ -0,0 +1,19 @@
+import { tv } from "tailwind-variants";
+export const list = tv({
+    base: "",
+    variants: {
+        tag: {
+            ul: "list-disc",
+            dl: "list-none",
+            ol: "list-decimal"
+        },
+        position: {
+            inside: "list-inside",
+            outside: "list-outside"
+        }
+    },
+    defaultVariants: {
+        position: "inside",
+        tag: "ul"
+    }
+});

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+import type { HTMLLiAttributes, HTMLOlAttributes } from "svelte/elements";
+import type { ListVariants } from "./theme";
+interface ListProps extends HTMLOlAttributes {
+    children: Snippet;
+    tag?: ListVariants["tag"];
+    position?: ListVariants["position"];
+    ctxClass?: string;
+    isContenteditable?: boolean;
+}
+interface LiProps extends HTMLLiAttributes {
+    children: Snippet;
+    icon?: boolean;
+}
+export { type ListProps, type LiProps };

package/dist/typography/list/type.js

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

package/dist/typography/mark/Mark.svelte

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

package/dist/typography/mark/Mark.svelte.d.ts

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

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

@@ -0,0 +1,4 @@
+import type { MarkProps } from "./type";
+import Mark from "./Mark.svelte";
+import { mark } from "./theme";
+export { Mark, mark, type MarkProps };

package/dist/typography/mark/index.js

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

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

@@ -0,0 +1 @@
+export declare const mark: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-white dark:bg-blue-500 bg-blue-600 px-2 rounded-sm", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-white dark:bg-blue-500 bg-blue-600 px-2 rounded-sm", unknown, unknown, undefined>>;

package/dist/typography/mark/theme.js

@@ -0,0 +1,4 @@
+import { tv } from "tailwind-variants";
+export const mark = tv({
+    base: "text-white dark:bg-blue-500 bg-blue-600 px-2 rounded-sm"
+});

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

@@ -0,0 +1,6 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+interface MarkProps extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+}
+export { type MarkProps };

package/dist/typography/mark/type.js

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

package/dist/typography/paragraph/P.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { type ParagraphProps as Props, paragraph } from "./index";
+
+  let { children, class: className = "text-gray-900 dark:text-white", height = "normal", align = "left", justify = false, italic, firstUpper = false, whitespace = "normal", size = "base", space = "normal", weight = "normal", ...restProps }: Props = $props();
+
+  let classP = $derived(paragraph({ height, size, weight, space, align, justify, italic, firstUpper, whitespace, class: clsx(className) }));
+</script>
+
+<p {...restProps} class={classP}>
+  {@render children()}
+</p>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: children: any;
+@props:class: string = "text-gray-900 dark:text-white";
+@props:height: any = "normal";
+@props:align: any = "left";
+@props:justify: any = false;
+@props:italic: any;
+@props:firstUpper: any = false;
+@props:whitespace: any = "normal";
+@props:size: any = "base";
+@props:space: any = "normal";
+@props:weight: any = "normal";
+-->