flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/tooltip/theme.d.ts

@@ -0,0 +1,238 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Placement } from "@floating-ui/dom";
+export type TooltipVariants = VariantProps<typeof tooltip>;
+export declare const tooltip: import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            base: string;
+        };
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        gray: {
+            base: string;
+        };
+        red: {
+            base: string;
+        };
+        orange: {
+            base: string;
+        };
+        amber: {
+            base: string;
+        };
+        yellow: {
+            base: string;
+        };
+        lime: {
+            base: string;
+        };
+        green: {
+            base: string;
+        };
+        emerald: {
+            base: string;
+        };
+        teal: {
+            base: string;
+        };
+        cyan: {
+            base: string;
+        };
+        sky: {
+            base: string;
+        };
+        blue: {
+            base: string;
+        };
+        indigo: {
+            base: string;
+        };
+        violet: {
+            base: string;
+        };
+        purple: {
+            base: string;
+        };
+        fuchsia: {
+            base: string;
+        };
+        pink: {
+            base: string;
+        };
+        rose: {
+            base: string;
+        };
+    };
+    arrow: {
+        true: {
+            arrowBase: string;
+        };
+        false: {
+            arrowBase: string;
+        };
+    };
+    placement: Record<Placement, object>;
+}, {
+    base: string;
+    arrowBase: string;
+}, undefined, {
+    color: {
+        default: {
+            base: string;
+        };
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        gray: {
+            base: string;
+        };
+        red: {
+            base: string;
+        };
+        orange: {
+            base: string;
+        };
+        amber: {
+            base: string;
+        };
+        yellow: {
+            base: string;
+        };
+        lime: {
+            base: string;
+        };
+        green: {
+            base: string;
+        };
+        emerald: {
+            base: string;
+        };
+        teal: {
+            base: string;
+        };
+        cyan: {
+            base: string;
+        };
+        sky: {
+            base: string;
+        };
+        blue: {
+            base: string;
+        };
+        indigo: {
+            base: string;
+        };
+        violet: {
+            base: string;
+        };
+        purple: {
+            base: string;
+        };
+        fuchsia: {
+            base: string;
+        };
+        pink: {
+            base: string;
+        };
+        rose: {
+            base: string;
+        };
+    };
+    arrow: {
+        true: {
+            arrowBase: string;
+        };
+        false: {
+            arrowBase: string;
+        };
+    };
+    placement: Record<Placement, object>;
+}, {
+    base: string;
+    arrowBase: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            base: string;
+        };
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        gray: {
+            base: string;
+        };
+        red: {
+            base: string;
+        };
+        orange: {
+            base: string;
+        };
+        amber: {
+            base: string;
+        };
+        yellow: {
+            base: string;
+        };
+        lime: {
+            base: string;
+        };
+        green: {
+            base: string;
+        };
+        emerald: {
+            base: string;
+        };
+        teal: {
+            base: string;
+        };
+        cyan: {
+            base: string;
+        };
+        sky: {
+            base: string;
+        };
+        blue: {
+            base: string;
+        };
+        indigo: {
+            base: string;
+        };
+        violet: {
+            base: string;
+        };
+        purple: {
+            base: string;
+        };
+        fuchsia: {
+            base: string;
+        };
+        pink: {
+            base: string;
+        };
+        rose: {
+            base: string;
+        };
+    };
+    arrow: {
+        true: {
+            arrowBase: string;
+        };
+        false: {
+            arrowBase: string;
+        };
+    };
+    placement: Record<Placement, object>;
+}, {
+    base: string;
+    arrowBase: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/tooltip/theme.js

@@ -0,0 +1,55 @@
+import { tv } from "tailwind-variants";
+export const tooltip = tv({
+    slots: {
+        base: "absolute bg-gray-800 text-white px-2 py-1 rounded-sm text-sm z-50 pointer-events-none",
+        arrowBase: "absolute w-2 h-2 rotate-45 bg-inherit"
+    },
+    variants: {
+        color: {
+            default: { base: "bg-gray-800" },
+            primary: { base: "bg-primary-600" },
+            secondary: { base: "bg-secondary-600" },
+            gray: { base: "bg-gray-600" },
+            red: { base: "bg-red-600" },
+            orange: { base: "bg-orange-600" },
+            amber: { base: "bg-amber-600" },
+            yellow: { base: "bg-yellow-400" },
+            lime: { base: "bg-lime-600" },
+            green: { base: "bg-green-600" },
+            emerald: { base: "bg-emerald-600" },
+            teal: { base: "bg-teal-600" },
+            cyan: { base: "bg-cyan-600" },
+            sky: { base: "bg-sky-600" },
+            blue: { base: "bg-blue-600" },
+            indigo: { base: "bg-indigo-600" },
+            violet: { base: "bg-violet-600" },
+            purple: { base: "bg-purple-600" },
+            fuchsia: { base: "bg-fuchsia-600" },
+            pink: { base: "bg-pink-600" },
+            rose: { base: "bg-rose-800" }
+        },
+        arrow: {
+            true: { arrowBase: "visible" },
+            false: { arrowBase: "hidden" }
+        },
+        placement: {
+            top: {},
+            "top-start": {},
+            "top-end": {},
+            bottom: {},
+            "bottom-start": {},
+            "bottom-end": {},
+            left: {},
+            "left-start": {},
+            "left-end": {},
+            right: {},
+            "right-start": {},
+            "right-end": {}
+        }
+    },
+    defaultVariants: {
+        color: "default",
+        arrow: true,
+        placement: "top"
+    }
+});

package/dist/tooltip/type.d.ts

@@ -0,0 +1,7 @@
+import type { PopperProps } from "../utils/Popper.svelte";
+import type { TooltipVariants } from "./theme";
+interface TooltipProps extends PopperProps {
+    type?: "light" | "dark";
+    color?: TooltipVariants["color"];
+}
+export { type TooltipProps };

package/dist/tooltip/type.js

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

package/dist/types.d.ts

@@ -1,58 +1,21 @@
-import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-import type { FadeParams, BlurParams, FlyParams, SlideParams, ScaleParams } from 'svelte/transition';
-export type BlockQuoteType = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
-export type ButtonColorType = 'alternative' | 'blue' | 'dark' | 'green' | 'light' | 'primary' | 'purple' | 'red' | 'yellow' | 'none';
-export type CheckboxItem = {
-    value: string;
-    label?: string;
-    isChecked?: boolean;
-};
-export type ColorVariant = 'dark' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'primary' | 'none';
-export type ImgType = {
-    src: string;
-    alt?: string;
-};
-export type IndicatorColorType = 'gray' | 'dark' | 'blue' | 'green' | 'red' | 'purple' | 'indigo' | 'yellow' | 'teal' | 'none';
-export type IndicatorPlacementType = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | undefined;
-export type InputType = 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'reset' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | 'search';
-export type FormColorType = 'blue' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'orange' | 'primary' | 'secondary';
-export type ModalPlacementType = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-export type ParamsType = FadeParams | BlurParams | FlyParams | SlideParams | ScaleParams;
-export type PsizeType = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
-export type PweightType = 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
-export type TableColorType = 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'indigo' | 'pink' | 'default' | 'custom';
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+import type { TransitionConfig, FadeParams, BlurParams, FlyParams, SlideParams, ScaleParams } from "svelte/transition";
+import { tv } from "tailwind-variants";
+export interface ThemeConfig {
+    slots?: Record<string, object | string>;
+    variants?: Record<string, object>;
+    compoundVariants?: Array<Record<string, object>>;
+    defaultVariants?: Record<string, object>;
+}
+export interface ThemeType {
+    [key: string]: ReturnType<typeof tv>;
+}
 export declare const xs = "xs";
 export declare const sm = "sm";
 export declare const md = "md";
 export declare const lg = "lg";
 export declare const xl = "xl";
-export declare type SizeType = typeof xs | typeof sm | typeof md | typeof lg | typeof xl;
-export declare type FormSizeType = typeof sm | typeof md | typeof lg;
-export type ReviewType = {
-    name: string;
-    imgSrc: string;
-    imgAlt: string;
-    address: string | undefined;
-    reviewDate: string | undefined;
-    title: string;
-    rating: number;
-    item1: string | undefined;
-    item2: string | undefined;
-    item3: string | undefined;
-};
-export type SelectOptionType<T> = {
-    name: string | number;
-    value: T;
-    disabled?: boolean;
-};
-export type TransitionTypes = 'fade' | 'fly' | 'slide' | 'blur-sm' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur';
-export interface ActivityType {
-    title: HTMLElement | string;
-    date: Date | string;
-    src: string;
-    alt: string;
-    text?: HTMLElement | string;
-}
 export interface drawerTransitionParamTypes {
     amount?: number;
     delay?: number;
@@ -62,52 +25,40 @@ export interface drawerTransitionParamTypes {
     x?: number;
     y?: number;
 }
-export interface Dismissable {
-    dismissable?: boolean;
-}
-export interface GroupTimelineType {
-    title: string | HTMLElement;
-    src: string;
-    alt: string;
-    href?: string;
-    isPrivate?: boolean;
-    comment?: string | HTMLElement;
-}
-export interface ListGroupItemType {
-    name?: string;
-    current?: boolean;
-    disabled?: boolean;
-    href?: string;
-    attrs?: HTMLAnchorAttributes | HTMLButtonAttributes;
-    [propName: string]: any;
+export type FormSizeType = "sm" | "md" | "lg";
+export type NavbarType = {
+    navStatus: boolean | undefined;
+    breakPoint: "md" | "lg" | "xl" | "xxl";
+    activeClass: string | undefined | null;
+    nonActiveClass: string | undefined | null;
+    closeNav: () => void;
+};
+export type ColorVariant = "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "primary" | "none";
+export type DeviceVariantType = "default" | "ios" | "android" | "tablet" | "laptop" | "desktop" | "smartwatch";
+export declare type SizeType = typeof xs | typeof sm | typeof md | typeof lg | typeof xl;
+export type TransitionTypes = "fade" | "fly" | "slide" | "blur" | "in:fly" | "out:fly" | "in:slide" | "out:slide" | "in:fade" | "out:fade" | "in:blur" | "out:blur";
+export interface TransitionParamTypes {
+    delay?: number;
+    duration?: number;
+    easing?: (t: number) => number;
+    css?: (t: number, u: number) => string | undefined | null;
+    tick?: (t: number, u: number) => void;
 }
+export type ParamsType = FadeParams | BlurParams | FlyParams | SlideParams | ScaleParams;
+export type TransitionFunc = (node: HTMLElement, params: ParamsType) => TransitionConfig;
+export type ModalPlacementType = "top-left" | "top-center" | "top-right" | "center-left" | "center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right";
 export interface LinkType {
     name: string;
     href?: string;
     rel?: string;
     active?: boolean;
+    [propName: string]: any;
 }
-export interface SiteType {
-    name: string;
+interface AnchorAttributes extends Omit<HTMLAnchorAttributes, "on:copy" | "oncopy"> {
     href: string;
-    img?: string;
-}
-export interface TransitionParamTypes {
-    delay?: number;
-    duration?: number;
-    easing?: (t: number) => number;
-    css?: (t: number, u: number) => string;
-    tick?: (t: number, u: number) => void;
 }
-export interface ButtonClassesTypes {
-    default?: string;
-    border?: string;
-    application?: string;
-    pagination?: string;
-    group?: string;
-    card?: string;
-    meeting?: string;
-    video?: string;
-    custom?: string;
+interface ButtonAttibutes extends Omit<HTMLButtonAttributes, "on:copy" | "oncopy"> {
+    href: null;
 }
-export type ToastPositionType = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none';
+export type AnchorButtonAttributes = AnchorAttributes | ButtonAttibutes;
+export {};

package/dist/types.js

@@ -1 +1 @@
-export {};
+import { tv } from "tailwind-variants";

package/dist/typography/anchor/A.svelte

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

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

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

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

@@ -0,0 +1,4 @@
+import type { AnchorProps } from "./type";
+import A from "./A.svelte";
+import { anchor } from "./theme";
+export { A, anchor, type AnchorProps };

package/dist/typography/anchor/index.js

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

package/dist/typography/anchor/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/anchor/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/anchor/type.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+import type { AnchorVariants } from "./theme";
+interface AnchorProps extends HTMLAnchorAttributes {
+    children: Snippet;
+    color?: AnchorVariants["color"];
+}
+export { type AnchorProps };

package/dist/typography/anchor/type.js

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

package/dist/typography/blockquote/Blockquote.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { type BlockquoteProps as Props, blockquote } from "./index";
+
+  let { children, class: className, border, italic = true, bg, alignment = "left", size = "lg", ...restProps }: Props = $props();
+
+  let blockquoteClass = $derived(
+    blockquote({
+      border,
+      italic,
+      bg,
+      alignment,
+      size,
+      class: clsx(className)
+    })
+  );
+</script>
+
+<blockquote {...restProps} class={blockquoteClass}>
+  {@render children()}
+</blockquote>
+
+<!--
+@component
+[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";
+-->