@pajohns/flowbite-svelte 0.1.0

package/dist/types.js

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

package/dist/typography/a/A.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { anchor } from "./theme";
+  import type { AnchorProps } from "../../types";
+  import { getTheme } from "../../theme/themeUtils";
+
+  let { children, color = "primary", asButton = false, onclick, href = "#", class: className, ...restProps }: AnchorProps = $props();
+
+  const theme = $derived(getTheme("anchor"));
+
+  let linkCls = $derived(anchor({ color, class: clsx(theme, className) }));
+
+  // Handle click events when in button mode
+  function handleClick(event: MouseEvent) {
+    if (asButton) {
+      event.preventDefault(); // Prevent default anchor behavior
+    }
+    // Forward the onclick handler if provided
+    if (onclick) {
+      onclick(event);
+    }
+  }
+
+  let buttonProps = $derived(() => {
+    const { href, target, rel, download, ...filtered } = restProps;
+    return filtered;
+  });
+</script>
+
+{#if asButton}
+  <!-- Render as a button that looks like a link -->
+  <button type="button" class={linkCls} onclick={handleClick} {...buttonProps}>
+    {@render children()}
+  </button>
+{:else}
+  <!-- Standard anchor behavior -->
+  <a {href} class={linkCls} onclick={handleClick} {...restProps}>
+    {@render children()}
+  </a>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2005)
+## Props
+@prop children
+@prop color = "primary"
+@prop asButton = false
+@prop onclick
+@prop href = "#"
+@prop class: className
+@prop ...restProps
+-->

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

@@ -0,0 +1,17 @@
+import type { AnchorProps } from "../../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2005)
+ * ## Props
+ * @prop children
+ * @prop color = "primary"
+ * @prop asButton = false
+ * @prop onclick
+ * @prop href = "#"
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const A: import("svelte").Component<AnchorProps, {}, "">;
+type A = ReturnType<typeof A>;
+export default A;

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

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

package/dist/typography/a/index.js

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

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

@@ -0,0 +1,72 @@
+import { type VariantProps } from "tailwind-variants";
+export type AnchorVariants = VariantProps<typeof anchor>;
+export declare const anchor: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, undefined, "inline-flex items-center hover:underline", {
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, undefined, "inline-flex items-center hover:underline", unknown, unknown, undefined>>;

package/dist/typography/a/theme.js

@@ -0,0 +1,29 @@
+import { tv } from "tailwind-variants";
+export const anchor = tv({
+    base: "inline-flex items-center hover:underline",
+    variants: {
+        color: {
+            // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+            primary: "text-primary-600 dark:text-primary-500",
+            secondary: "text-secondary-600 dark:text-secondary-500",
+            gray: "text-gray-600 dark:text-gray-500",
+            red: "text-red-600 dark:text-red-500",
+            orange: "text-orange-600 dark:text-orange-500",
+            amber: "text-amber-600 dark:text-amber-500",
+            yellow: "text-yellow-600 dark:text-yellow-500",
+            lime: "text-lime-600 dark:text-lime-500",
+            green: "text-green-600 dark:text-green-500",
+            emerald: "text-emerald-600 dark:text-emerald-500",
+            teal: "text-teal-600 dark:text-teal-500",
+            cyan: "text-cyan-600 dark:text-cyan-500",
+            sky: "text-sky-600 dark:text-sky-500",
+            blue: "text-blue-600 dark:text-blue-500",
+            indigo: "text-indigo-600 dark:text-indigo-500",
+            violet: "text-violet-600 dark:text-violet-500",
+            purple: "text-purple-600 dark:text-purple-500",
+            fuchsia: "text-fuchsia-600 dark:text-fuchsia-500",
+            pink: "text-pink-600 dark:text-pink-500",
+            rose: "text-rose-600 dark:text-rose-500"
+        }
+    }
+});

package/dist/typography/blockquote/Blockquote.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { blockquote } from "./theme";
+  import type { BlockquoteProps } from "../../types";
+  import { getTheme } from "../../theme/themeUtils";
+
+  let { children, class: className, border, italic = true, bg, alignment = "left", size = "lg", ...restProps }: BlockquoteProps = $props();
+
+  const theme = $derived(getTheme("blockquote"));
+
+  let blockquoteCls = $derived(
+    blockquote({
+      border,
+      italic,
+      bg,
+      alignment,
+      size,
+      class: clsx(theme, className)
+    })
+  );
+</script>
+
+<blockquote {...restProps} class={blockquoteCls}>
+  {@render children()}
+</blockquote>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[BlockquoteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2034)
+## Props
+@prop children
+@prop class: className
+@prop border
+@prop italic = true
+@prop bg
+@prop alignment = "left"
+@prop size = "lg"
+@prop ...restProps
+-->

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

@@ -0,0 +1,18 @@
+import type { BlockquoteProps } from "../../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [BlockquoteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2034)
+ * ## Props
+ * @prop children
+ * @prop class: className
+ * @prop border
+ * @prop italic = true
+ * @prop bg
+ * @prop alignment = "left"
+ * @prop size = "lg"
+ * @prop ...restProps
+ */
+declare const Blockquote: import("svelte").Component<BlockquoteProps, {}, "">;
+type Blockquote = ReturnType<typeof Blockquote>;
+export default Blockquote;

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

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

package/dist/typography/blockquote/index.js

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

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/descriptionlist/DescriptionList.svelte

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

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

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

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

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

package/dist/typography/descriptionlist/index.js

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

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/heading/Heading.svelte

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

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

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

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

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

package/dist/typography/heading/index.js

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

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/hr/Hr.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { hr } from "./theme";
+  import type { HrProps } from "../../types";
+  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { untrack } from "svelte";
+
+  let { children, divClass, innerDivClass, class: className, classes, divProps = {}, hrProps = {}, ...restProps }: HrProps = $props();
+
+  warnThemeDeprecation(
+    "Hr",
+    untrack(() => ({ divClass, innerDivClass })),
+    {
+      divClass: "div",
+      innerDivClass: "content"
+    }
+  );
+
+  const styling = $derived(
+    classes ?? {
+      div: divClass,
+      content: innerDivClass
+    }
+  );
+
+  const theme = $derived(getTheme("hr"));
+  const bg = $derived(classes?.bg ?? "bg-gray-200 dark:bg-gray-700");
+
+  // for backward compatibility and ...restPorps will be removed and use only ..divProps and ...hrProps in future
+  const mergedDivProps = $derived({ ...restProps, ...divProps });
+  const mergedHrProps = $derived({ ...restProps, ...hrProps });
+
+  let { base, div, content } = $derived(hr({ withChildren: !!children }));
+</script>
+
+{#if children}
+  <div {...mergedDivProps} class={div({ class: clsx(theme?.div, styling.div) })}>
+    <hr {...mergedHrProps} class={base({ class: clsx(theme?.base, className, bg) })} />
+    <div class={content({ class: clsx(theme?.content, styling.content) })}>
+      {@render children()}
+    </div>
+  </div>
+{:else}
+  <hr {...mergedHrProps} class={base({ class: clsx(theme?.base, className, bg) })} />
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[HrProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1893)
+## Props
+@prop children
+@prop divClass
+@prop innerDivClass
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

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

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

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

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