@pajohns/flowbite-svelte 0.1.0

package/dist/datepicker/theme.d.ts

@@ -0,0 +1,388 @@
+import type { Classes } from "../theme/themeUtils";
+import { type VariantProps } from "tailwind-variants";
+export type DatepickerVariants = VariantProps<typeof datepicker> & Classes<typeof datepicker>;
+export declare const datepicker: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            input: string;
+            dayButton: string;
+        };
+        blue: {
+            input: string;
+            dayButton: string;
+        };
+        red: {
+            input: string;
+            dayButton: string;
+        };
+        green: {
+            input: string;
+            dayButton: string;
+        };
+        yellow: {
+            input: string;
+            dayButton: string;
+        };
+        purple: {
+            input: string;
+            dayButton: string;
+        };
+        dark: {
+            input: string;
+            dayButton: string;
+        };
+        light: {
+            input: string;
+            dayButton: string;
+        };
+        alternative: {
+            input: string;
+            dayButton: string;
+        };
+        secondary: {
+            input: string;
+            dayButton: string;
+        };
+        gray: {
+            input: string;
+            dayButton: string;
+        };
+        orange: {
+            input: string;
+            dayButton: string;
+        };
+        amber: {
+            input: string;
+            dayButton: string;
+        };
+        lime: {
+            input: string;
+            dayButton: string;
+        };
+        emerald: {
+            input: string;
+            dayButton: string;
+        };
+        teal: {
+            input: string;
+            dayButton: string;
+        };
+        cyan: {
+            input: string;
+            dayButton: string;
+        };
+        sky: {
+            input: string;
+            dayButton: string;
+        };
+        indigo: {
+            input: string;
+            dayButton: string;
+        };
+        violet: {
+            input: string;
+            dayButton: string;
+        };
+        fuchsia: {
+            input: string;
+            dayButton: string;
+        };
+        pink: {
+            input: string;
+            dayButton: string;
+        };
+        rose: {
+            input: string;
+            dayButton: string;
+        };
+    };
+    inline: {
+        false: {
+            base: string;
+        };
+    };
+    current: {
+        true: {
+            dayButton: string;
+        };
+    };
+    today: {
+        true: {
+            dayButton: string;
+        };
+    };
+    unavailable: {
+        true: {
+            dayButton: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    titleVariant: string;
+    polite: string;
+    button: string;
+    actionButtons: string;
+    columnHeader: string;
+    grid: string;
+    nav: string;
+    dayButton: string;
+    monthButton: string;
+    actionSlot: string;
+}, undefined, {
+    color: {
+        primary: {
+            input: string;
+            dayButton: string;
+        };
+        blue: {
+            input: string;
+            dayButton: string;
+        };
+        red: {
+            input: string;
+            dayButton: string;
+        };
+        green: {
+            input: string;
+            dayButton: string;
+        };
+        yellow: {
+            input: string;
+            dayButton: string;
+        };
+        purple: {
+            input: string;
+            dayButton: string;
+        };
+        dark: {
+            input: string;
+            dayButton: string;
+        };
+        light: {
+            input: string;
+            dayButton: string;
+        };
+        alternative: {
+            input: string;
+            dayButton: string;
+        };
+        secondary: {
+            input: string;
+            dayButton: string;
+        };
+        gray: {
+            input: string;
+            dayButton: string;
+        };
+        orange: {
+            input: string;
+            dayButton: string;
+        };
+        amber: {
+            input: string;
+            dayButton: string;
+        };
+        lime: {
+            input: string;
+            dayButton: string;
+        };
+        emerald: {
+            input: string;
+            dayButton: string;
+        };
+        teal: {
+            input: string;
+            dayButton: string;
+        };
+        cyan: {
+            input: string;
+            dayButton: string;
+        };
+        sky: {
+            input: string;
+            dayButton: string;
+        };
+        indigo: {
+            input: string;
+            dayButton: string;
+        };
+        violet: {
+            input: string;
+            dayButton: string;
+        };
+        fuchsia: {
+            input: string;
+            dayButton: string;
+        };
+        pink: {
+            input: string;
+            dayButton: string;
+        };
+        rose: {
+            input: string;
+            dayButton: string;
+        };
+    };
+    inline: {
+        false: {
+            base: string;
+        };
+    };
+    current: {
+        true: {
+            dayButton: string;
+        };
+    };
+    today: {
+        true: {
+            dayButton: string;
+        };
+    };
+    unavailable: {
+        true: {
+            dayButton: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    titleVariant: string;
+    polite: string;
+    button: string;
+    actionButtons: string;
+    columnHeader: string;
+    grid: string;
+    nav: string;
+    dayButton: string;
+    monthButton: string;
+    actionSlot: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            input: string;
+            dayButton: string;
+        };
+        blue: {
+            input: string;
+            dayButton: string;
+        };
+        red: {
+            input: string;
+            dayButton: string;
+        };
+        green: {
+            input: string;
+            dayButton: string;
+        };
+        yellow: {
+            input: string;
+            dayButton: string;
+        };
+        purple: {
+            input: string;
+            dayButton: string;
+        };
+        dark: {
+            input: string;
+            dayButton: string;
+        };
+        light: {
+            input: string;
+            dayButton: string;
+        };
+        alternative: {
+            input: string;
+            dayButton: string;
+        };
+        secondary: {
+            input: string;
+            dayButton: string;
+        };
+        gray: {
+            input: string;
+            dayButton: string;
+        };
+        orange: {
+            input: string;
+            dayButton: string;
+        };
+        amber: {
+            input: string;
+            dayButton: string;
+        };
+        lime: {
+            input: string;
+            dayButton: string;
+        };
+        emerald: {
+            input: string;
+            dayButton: string;
+        };
+        teal: {
+            input: string;
+            dayButton: string;
+        };
+        cyan: {
+            input: string;
+            dayButton: string;
+        };
+        sky: {
+            input: string;
+            dayButton: string;
+        };
+        indigo: {
+            input: string;
+            dayButton: string;
+        };
+        violet: {
+            input: string;
+            dayButton: string;
+        };
+        fuchsia: {
+            input: string;
+            dayButton: string;
+        };
+        pink: {
+            input: string;
+            dayButton: string;
+        };
+        rose: {
+            input: string;
+            dayButton: string;
+        };
+    };
+    inline: {
+        false: {
+            base: string;
+        };
+    };
+    current: {
+        true: {
+            dayButton: string;
+        };
+    };
+    today: {
+        true: {
+            dayButton: string;
+        };
+    };
+    unavailable: {
+        true: {
+            dayButton: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    titleVariant: string;
+    polite: string;
+    button: string;
+    actionButtons: string;
+    columnHeader: string;
+    grid: string;
+    nav: string;
+    dayButton: string;
+    monthButton: string;
+    actionSlot: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/datepicker/theme.js

@@ -0,0 +1,57 @@
+import { tv } from "tailwind-variants";
+export const datepicker = tv({
+    slots: {
+        base: "inline-block rounded-lg bg-white dark:bg-gray-700 shadow-lg p-4",
+        input: "w-full rounded-md border px-4 py-2 text-sm focus:ring-2 focus:outline-none outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white disabled:cursor-not-allowed disabled:opacity-50 border-gray-300 bg-gray-50 text-gray-900",
+        titleVariant: "mb-2 text-lg font-semibold text-gray-900 dark:text-white",
+        polite: "text-sm rounded-lg text-gray-900 dark:text-white bg-white dark:bg-gray-700 font-semibold py-2.5 px-5 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-200",
+        button: "absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 focus:outline-hidden dark:text-gray-400",
+        actionButtons: "mt-4 flex justify-between",
+        columnHeader: "text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+        grid: "grid grid-cols-7 gap-1 w-64",
+        nav: "mb-4 flex items-center justify-between",
+        dayButton: "h-8 w-full block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center font-semibold text-sm day p-0",
+        monthButton: "rounded-lg px-3 py-2 text-sm hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:hover:bg-gray-700",
+        actionSlot: ""
+    },
+    variants: {
+        color: {
+            primary: { input: "focus:ring-primary-500 dark:focus:ring-primary-400", dayButton: "bg-primary-300 dark:bg-primary-900" },
+            blue: { input: "focus:ring-blue-500 dark:focus:ring-blue-400", dayButton: "bg-blue-300 dark:bg-blue-900" },
+            red: { input: "focus:ring-red-500 dark:focus:ring-red-400", dayButton: "bg-red-300 dark:bg-red-900" },
+            green: { input: "focus:ring-green-500 dark:focus:ring-green-400", dayButton: "bg-green-300 dark:bg-green-900" },
+            yellow: { input: "focus:ring-yellow-500 dark:focus:ring-yellow-400", dayButton: "bg-yellow-300 dark:bg-yellow-900" },
+            purple: { input: "focus:ring-purple-500 dark:focus:ring-purple-400", dayButton: "bg-purple-300 dark:bg-purple-900" },
+            dark: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-300 dark:bg-gray-900" },
+            light: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-300 dark:bg-gray-900" },
+            alternative: { input: "focus:ring-alternative-500 dark:focus:ring-alternative-400", dayButton: "bg-alternative-300 dark:bg-alternative-900" },
+            secondary: { input: "focus:ring-secondary-500 dark:focus:ring-secondary-400", dayButton: "bg-secondary-300 dark:bg-secondary-900" },
+            gray: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-300 dark:bg-gray-900" },
+            orange: { input: "focus:ring-orange-500 dark:focus:ring-orange-400", dayButton: "bg-orange-300 dark:bg-orange-900" },
+            amber: { input: "focus:ring-amber-500 dark:focus:ring-amber-400", dayButton: "bg-amber-300 dark:bg-amber-900" },
+            lime: { input: "focus:ring-lime-500 dark:focus:ring-lime-400", dayButton: "bg-lime-300 dark:bg-lime-900" },
+            emerald: { input: "focus:ring-emerald-500 dark:focus:ring-emerald-400", dayButton: "bg-emerald-300 dark:bg-emerald-900" },
+            teal: { input: "focus:ring-teal-500 dark:focus:ring-teal-400", dayButton: "bg-teal-300 dark:bg-teal-900" },
+            cyan: { input: "focus:ring-cyan-500 dark:focus:ring-cyan-400", dayButton: "bg-cyan-300 dark:bg-cyan-900" },
+            sky: { input: "focus:ring-sky-500 dark:focus:ring-sky-400", dayButton: "bg-sky-300 dark:bg-sky-900" },
+            indigo: { input: "focus:ring-indigo-500 dark:focus:ring-indigo-400", dayButton: "bg-indigo-300 dark:bg-indigo-900" },
+            violet: { input: "focus:ring-violet-500 dark:focus:ring-violet-400", dayButton: "bg-violet-300 dark:bg-violet-900" },
+            fuchsia: { input: "focus:ring-fuchsia-500 dark:focus:ring-fuchsia-400", dayButton: "bg-fuchsia-300 dark:bg-fuchsia-900" },
+            pink: { input: "focus:ring-pink-500 dark:focus:ring-pink-400", dayButton: "bg-pink-300 dark:bg-pink-900" },
+            rose: { input: "focus:ring-rose-500 dark:focus:ring-rose-400", dayButton: "bg-rose-300 dark:bg-rose-900" }
+        },
+        inline: {
+            false: { base: "absolute z-10 mt-1" }
+        },
+        current: {
+            true: { dayButton: "text-gray-400 dark:text-gray-500" }
+        },
+        today: {
+            true: { dayButton: "font-bold" }
+        },
+        unavailable: {
+            true: { dayButton: "opacity-50 cursor-not-allowed hover:bg-gray-100 dark:hover:bg-gray-700" }
+        }
+    },
+    compoundVariants: []
+});

package/dist/device-mockups/Android.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { AndroidProps } from "..";
+  import { warnThemeDeprecation } from "../theme/themeUtils";
+  import clsx from "clsx";
+  import { android } from "./theme";
+  import { untrack } from "svelte";
+
+  let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class, ...restProps }: AndroidProps = $props();
+
+  warnThemeDeprecation(
+    "Android",
+    untrack(() => ({ divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class })),
+    { divClass: "class", div2Class: "top", div3Class: "leftTop", div4Class: "leftMid", div5Class: "leftBot", div6Class: "right", div7Class: "slot" }
+  );
+
+  const styling = $derived(
+    classes ?? {
+      top: div2Class,
+      leftTop: div3Class,
+      leftMid: div4Class,
+      leftBot: div5Class,
+      right: div6Class,
+      slot: div7Class
+    }
+  );
+
+  const { base, slot, top, leftTop, leftMid, leftBot, right } = android();
+</script>
+
+<div {...restProps} class={base({ class: clsx(className ?? divClass) })}>
+  <div class={top({ class: clsx(styling.top) })}></div>
+  <div class={leftTop({ class: clsx(styling.leftTop) })}></div>
+  <div class={leftMid({ class: clsx(styling.leftMid) })}></div>
+  <div class={leftBot({ class: clsx(styling.leftBot) })}></div>
+  <div class={right({ class: clsx(styling.right) })}></div>
+  <div class={slot({ class: clsx(styling.slot) })}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L609)
+## Props
+@prop children
+@prop class: className
+@prop classes
+@prop divClass
+@prop div2Class
+@prop div3Class
+@prop div4Class
+@prop div5Class
+@prop div6Class
+@prop div7Class
+@prop ...restProps
+-->

package/dist/device-mockups/Android.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { AndroidProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L609)
+ * ## Props
+ * @prop children
+ * @prop class: className
+ * @prop classes
+ * @prop divClass
+ * @prop div2Class
+ * @prop div3Class
+ * @prop div4Class
+ * @prop div5Class
+ * @prop div6Class
+ * @prop div7Class
+ * @prop ...restProps
+ */
+declare const Android: import("svelte").Component<AndroidProps, {}, "">;
+type Android = ReturnType<typeof Android>;
+export default Android;

package/dist/device-mockups/DefaultMockup.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { DefaultMockupProps } from "..";
+  import { warnThemeDeprecation } from "../theme/themeUtils";
+  import clsx from "clsx";
+  import { defaultMockup } from "./theme";
+  import { untrack } from "svelte";
+
+  let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: DefaultMockupProps = $props();
+
+  warnThemeDeprecation(
+    "DefaultMockup",
+    untrack(() => ({ divClass, div2Class, div3Class, div4Class, div5Class, div6Class })),
+    { divClass: "class", div2Class: "top", div3Class: "leftTop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" }
+  );
+
+  const styling = $derived(
+    classes ?? {
+      top: div2Class,
+      leftTop: div3Class,
+      leftBot: div4Class,
+      right: div5Class,
+      slot: div6Class
+    }
+  );
+
+  const { base, slot, top, leftTop, leftBot, right } = defaultMockup();
+</script>
+
+<div {...restProps} class={base({ class: clsx(className ?? divClass) })}>
+  <div class={top({ class: clsx(styling.top) })}></div>
+  <div class={leftTop({ class: clsx(styling.leftTop) })}></div>
+  <div class={leftBot({ class: clsx(styling.leftBot) })}></div>
+  <div class={right({ class: clsx(styling.right) })}></div>
+  <div class={slot({ class: clsx(styling.slot) })}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L620)
+## Props
+@prop children
+@prop class: className
+@prop classes
+@prop divClass
+@prop div2Class
+@prop div3Class
+@prop div4Class
+@prop div5Class
+@prop div6Class
+@prop ...restProps
+-->

package/dist/device-mockups/DefaultMockup.svelte.d.ts

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

package/dist/device-mockups/Desktop.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { DesktopProps } from "..";
+  import { warnThemeDeprecation } from "../theme/themeUtils";
+  import clsx from "clsx";
+  import { desktop } from "./theme";
+  import { untrack } from "svelte";
+
+  let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, ...restProps }: DesktopProps = $props();
+
+  warnThemeDeprecation(
+    "Desktop",
+    untrack(() => ({ divClass, div2Class, div3Class, div4Class })),
+    { divClass: "class", div2Class: "inner", div3Class: "bot", div4Class: "botUnder" }
+  );
+
+  const styling = $derived(
+    classes ?? {
+      inner: div2Class,
+      bot: div3Class,
+      botUnder: div4Class
+    }
+  );
+
+  const { base, inner, bot, botUnder } = desktop();
+</script>
+
+<div {...restProps} class={base({ class: clsx(className ?? divClass) })}>
+  <div class={inner({ class: clsx(styling.inner) })}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</div>
+<div class={bot({ class: clsx(styling.bot) })}></div>
+<div class={botUnder({ class: clsx(styling.botUnder) })}></div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[DesktopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L593)
+## Props
+@prop children
+@prop class: className
+@prop classes
+@prop divClass
+@prop div2Class
+@prop div3Class
+@prop div4Class
+@prop ...restProps
+-->

package/dist/device-mockups/Desktop.svelte.d.ts

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