@pajohns/flowbite-svelte 0.1.0

package/dist/typography/hr/index.js

@@ -0,0 +1,2 @@
+export { default as Hr } from "./Hr.svelte";
+export { hr } from "./theme";

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

@@ -0,0 +1,40 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../../theme/themeUtils";
+export type HrVariants = VariantProps<typeof hr> & Classes<typeof hr>;
+export declare const hr: import("tailwind-variants").TVReturnType<{
+    withChildren: {
+        true: {
+            base: string;
+            div: string;
+        };
+    };
+}, {
+    base: string;
+    div: string;
+    content: string;
+    bg: string;
+}, undefined, {
+    withChildren: {
+        true: {
+            base: string;
+            div: string;
+        };
+    };
+}, {
+    base: string;
+    div: string;
+    content: string;
+    bg: string;
+}, import("tailwind-variants").TVReturnType<{
+    withChildren: {
+        true: {
+            base: string;
+            div: string;
+        };
+    };
+}, {
+    base: string;
+    div: string;
+    content: string;
+    bg: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/typography/hr/theme.js

@@ -0,0 +1,20 @@
+import { tv } from "tailwind-variants";
+export const hr = tv({
+    slots: {
+        base: "h-px my-8 border-0",
+        div: "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",
+        bg: ""
+    },
+    variants: {
+        withChildren: {
+            true: {
+                base: "w-full",
+                div: "relative"
+            }
+        }
+    },
+    defaultVariants: {
+        withChildren: false
+    }
+});

package/dist/typography/img/Img.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { img } from "./theme";
+  import type { ImgProps } from "../../types";
+  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { untrack } from "svelte";
+
+  let { children, size, effect: imgEffect, align, caption, class: className, classes, figClass, captionClass, href, ...restProps }: ImgProps = $props();
+
+  warnThemeDeprecation(
+    "Img",
+    untrack(() => ({ figClass, captionClass })),
+    {
+      figClass: "figure",
+      captionClass: "caption"
+    }
+  );
+
+  const styling = $derived({
+    figure: figClass || classes?.figure,
+    caption: captionClass || classes?.caption
+  });
+
+  const theme = $derived(getTheme("img"));
+
+  let { base, figure, caption: figureCaption } = $derived(img({ size, effect: imgEffect, align }));
+
+  // Determine if using slot or traditional props
+  const useSlot = $derived(!!children);
+  // Compute the final class string to pass to children
+  const imgClass = $derived(base({ class: clsx(theme?.base, className) }));
+</script>
+
+{#snippet imageSlot()}
+  {#if caption}
+    <figure class={figure({ class: clsx(theme?.figure, styling.figure) })}>
+      {#if useSlot}
+        {@render children?.({ class: imgClass, restProps })}
+      {:else}
+        <img {...restProps} class={imgClass} />
+      {/if}
+      <figcaption class={figureCaption({ class: clsx(theme?.caption, styling.caption) })}>
+        {@html caption}
+      </figcaption>
+    </figure>
+  {:else if useSlot}
+    {@render children?.({ class: imgClass, restProps })}
+  {:else}
+    <img {...restProps} class={imgClass} />
+  {/if}
+{/snippet}
+
+{#if href}
+  <a {href}>
+    {@render imageSlot()}
+  </a>
+{:else}
+  {@render imageSlot()}
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2081)
+## Props
+@prop children
+@prop size
+@prop effect: imgEffect
+@prop align
+@prop caption
+@prop class: className
+@prop classes
+@prop figClass
+@prop captionClass
+@prop href
+@prop ...restProps
+-->

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

@@ -0,0 +1,21 @@
+import type { ImgProps } from "../../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2081)
+ * ## Props
+ * @prop children
+ * @prop size
+ * @prop effect: imgEffect
+ * @prop align
+ * @prop caption
+ * @prop class: className
+ * @prop classes
+ * @prop figClass
+ * @prop captionClass
+ * @prop href
+ * @prop ...restProps
+ */
+declare const Img: import("svelte").Component<ImgProps, {}, "">;
+type Img = ReturnType<typeof Img>;
+export default Img;

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

@@ -0,0 +1,2 @@
+export { default as Img } from "./Img.svelte";
+export { img } from "./theme";

package/dist/typography/img/index.js

@@ -0,0 +1,2 @@
+export { default as Img } from "./Img.svelte";
+export { img } from "./theme";

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

@@ -0,0 +1,211 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../../theme/themeUtils";
+export type ImgVariants = VariantProps<typeof img> & Classes<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;
+        };
+    };
+    effect: {
+        grayscale: {
+            base: string;
+        };
+        blur: {
+            base: string;
+        };
+        invert: {
+            base: string;
+        };
+        sepia: {
+            base: string;
+        };
+        saturate: {
+            base: string;
+        };
+        "hue-rotate": {
+            base: string;
+        };
+    };
+    align: {
+        left: {
+            base: string;
+            figure: string;
+        };
+        center: {
+            base: string;
+            figure: string;
+        };
+        right: {
+            base: string;
+            figure: string;
+        };
+    };
+}, {
+    base: string;
+    figure: string;
+    caption: 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;
+        };
+    };
+    effect: {
+        grayscale: {
+            base: string;
+        };
+        blur: {
+            base: string;
+        };
+        invert: {
+            base: string;
+        };
+        sepia: {
+            base: string;
+        };
+        saturate: {
+            base: string;
+        };
+        "hue-rotate": {
+            base: string;
+        };
+    };
+    align: {
+        left: {
+            base: string;
+            figure: string;
+        };
+        center: {
+            base: string;
+            figure: string;
+        };
+        right: {
+            base: string;
+            figure: string;
+        };
+    };
+}, {
+    base: string;
+    figure: string;
+    caption: 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;
+        };
+    };
+    effect: {
+        grayscale: {
+            base: string;
+        };
+        blur: {
+            base: string;
+        };
+        invert: {
+            base: string;
+        };
+        sepia: {
+            base: string;
+        };
+        saturate: {
+            base: string;
+        };
+        "hue-rotate": {
+            base: string;
+        };
+    };
+    align: {
+        left: {
+            base: string;
+            figure: string;
+        };
+        center: {
+            base: string;
+            figure: string;
+        };
+        right: {
+            base: string;
+            figure: string;
+        };
+    };
+}, {
+    base: string;
+    figure: string;
+    caption: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/typography/img/theme.js

@@ -0,0 +1,42 @@
+import { tv } from "tailwind-variants";
+export const img = tv({
+    slots: {
+        base: "max-w-full h-auto",
+        figure: "",
+        caption: "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" }
+        },
+        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"
+            }
+        },
+        align: {
+            left: { base: "mx-0", figure: "mx-0" },
+            center: { base: "mx-auto", figure: "mx-auto" },
+            right: { base: "ml-auto mr-0", figure: "ml-auto mr-0" }
+        }
+    }
+});

package/dist/typography/layout/Layout.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { layout } from "./theme";
+  import type { LayoutProps } from "../../types";
+  import { getTheme } from "../../theme/themeUtils";
+
+  let { children, class: className, ...restProps }: LayoutProps = $props();
+
+  const theme = $derived(getTheme("layout"));
+
+  let divCls = $derived(layout({ class: clsx(theme, className) }));
+</script>
+
+<div {...restProps} class={divCls}>
+  {@render children()}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2105)
+## Props
+@prop children
+@prop class: className
+@prop ...restProps
+-->

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

@@ -0,0 +1,13 @@
+import type { LayoutProps } from "../../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2105)
+ * ## Props
+ * @prop children
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const Layout: import("svelte").Component<LayoutProps, {}, "">;
+type Layout = ReturnType<typeof Layout>;
+export default Layout;

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

@@ -0,0 +1,2 @@
+export { default as Layout } from "./Layout.svelte";
+export { layout } from "./theme";

package/dist/typography/layout/index.js

@@ -0,0 +1,2 @@
+export { default as Layout } from "./Layout.svelte";
+export { layout } from "./theme";

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/list/Li.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { LiProps } from "../../types";
+  import clsx from "clsx";
+  import { getListContext } from "../../context";
+
+  let { children, icon, class: className, ...restProps }: LiProps = $props();
+
+  const ctx = getListContext();
+
+  let liCls = $derived(clsx(ctx?.ctxClass, icon && "flex items-center", className));
+</script>
+
+<li {...restProps} class={liCls}>
+  {@render children()}
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2118)
+## Props
+@prop children
+@prop icon
+@prop class: className
+@prop ...restProps
+-->

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

@@ -0,0 +1,14 @@
+import type { LiProps } from "../../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2118)
+ * ## Props
+ * @prop children
+ * @prop icon
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const Li: import("svelte").Component<LiProps, {}, "">;
+type Li = ReturnType<typeof Li>;
+export default Li;

package/dist/typography/list/List.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { list } from "./theme";
+  import type { ListProps } from "../../types";
+  import clsx from "clsx";
+  import { getTheme } from "../../theme/themeUtils";
+  import { setListContext } from "../../context";
+
+  let { children, tag = "ul", isContenteditable = false, position = "inside", ctxClass, class: className, ...restProps }: ListProps = $props();
+
+  const theme = $derived(getTheme("list"));
+
+  let contextClass = $derived(ctxClass || "");
+
+  // Create context object
+  const ctx = {
+    get ctxClass() {
+      return contextClass;
+    }
+  };
+
+  // Set context during initialization
+  setListContext(ctx);
+
+  $effect(() => {
+    contextClass = ctxClass || "";
+  });
+
+  let classList = $derived(list({ position, tag, class: clsx(theme, className) }));
+</script>
+
+<svelte:element this={tag} {...restProps} class={classList} contenteditable={isContenteditable}>
+  {@render children()}
+</svelte:element>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2110)
+## Props
+@prop children
+@prop tag = "ul"
+@prop isContenteditable = false
+@prop position = "inside"
+@prop ctxClass
+@prop class: className
+@prop ...restProps
+-->

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

@@ -0,0 +1,17 @@
+import type { ListProps } from "../../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2110)
+ * ## Props
+ * @prop children
+ * @prop tag = "ul"
+ * @prop isContenteditable = false
+ * @prop position = "inside"
+ * @prop ctxClass
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const List: import("svelte").Component<ListProps, {}, "">;
+type List = ReturnType<typeof List>;
+export default List;

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

@@ -0,0 +1,3 @@
+export { default as List } from "./List.svelte";
+export { default as Li } from "./Li.svelte";
+export { list } from "./theme";

package/dist/typography/list/index.js

@@ -0,0 +1,3 @@
+export { default as List } from "./List.svelte";
+export { default as Li } from "./Li.svelte";
+export { list } from "./theme";

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 list-none",
+            ol: "list-decimal"
+        },
+        position: {
+            inside: "list-inside",
+            outside: "list-outside"
+        }
+    },
+    defaultVariants: {
+        position: "inside",
+        tag: "ul"
+    }
+});

package/dist/typography/mark/Mark.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { mark } from "./theme";
+  import type { MarkProps } from "../../types";
+  import { getTheme } from "../../theme/themeUtils";
+
+  let { children, class: className, ...restProps }: MarkProps = $props();
+
+  const theme = $derived(getTheme("mark"));
+</script>
+
+<mark {...restProps} class={mark({ class: clsx(theme, className) })}>
+  {@render children()}
+</mark>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2124)
+## Props
+@prop children
+@prop class: className
+@prop ...restProps
+-->