flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/buttons/theme.js

@@ -0,0 +1,383 @@
+import { tv } from "tailwind-variants";
+export const button = tv({
+    base: "text-center font-medium inline-flex items-center justify-center",
+    variants: {
+        color: {
+            // "primary" | "dark" | "alternative" | "light" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose"
+            primary: "text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus-within:ring-primary-300 dark:focus-within:ring-primary-800",
+            dark: "text-white bg-gray-800 hover:bg-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700 focus-within:ring-gray-300 dark:focus-within:ring-gray-700",
+            alternative: "text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 hover:text-primary-700 focus-within:text-primary-700 dark:focus-within:text-white dark:hover:text-white focus-within:ring-gray-200 dark:focus-within:ring-gray-700",
+            light: "text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 focus-within:ring-gray-200 dark:focus-within:ring-gray-700",
+            secondary: "text-white bg-secondary-700 hover:bg-secondary-800 dark:bg-secondary-600 dark:hover:bg-secondary-700 focus-within:ring-secondary-300 dark:focus-within:ring-secondary-800",
+            gray: "text-white bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 focus-within:ring-gray-300 dark:focus-within:ring-gray-800",
+            red: "text-white bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700 focus-within:ring-red-300 dark:focus-within:ring-red-900",
+            orange: "text-white bg-orange-700 hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 focus-within:ring-orange-300 dark:focus-within:ring-orange-900",
+            amber: "text-white bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 focus-within:ring-amber-300 dark:focus-within:ring-amber-900",
+            yellow: "text-white bg-yellow-400 hover:bg-yellow-500 focus-within:ring-yellow-300 dark:focus-within:ring-yellow-900",
+            lime: "text-white bg-lime-700 hover:bg-lime-800 dark:bg-lime-600 dark:hover:bg-lime-700 focus-within:ring-lime-300 dark:focus-within:ring-lime-800",
+            green: "text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 focus-within:ring-green-300 dark:focus-within:ring-green-800",
+            emerald: "text-white bg-emerald-700 hover:bg-emerald-800 dark:bg-emerald-600 dark:hover:bg-emerald-700 focus-within:ring-emerald-300 dark:focus-within:ring-emerald-800",
+            teal: "text-white bg-teal-700 hover:bg-teal-800 dark:bg-teal-600 dark:hover:bg-teal-700 focus-within:ring-teal-300 dark:focus-within:ring-teal-800",
+            cyan: "text-white bg-cyan-700 hover:bg-cyan-800 dark:bg-cyan-600 dark:hover:bg-cyan-700 focus-within:ring-cyan-300 dark:focus-within:ring-cyan-800",
+            sky: "text-white bg-sky-700 hover:bg-sky-800 dark:bg-sky-600 dark:hover:bg-sky-700 focus-within:ring-sky-300 dark:focus-within:ring-sky-800",
+            blue: "text-white bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus-within:ring-blue-300 dark:focus-within:ring-blue-800",
+            indigo: "text-white bg-indigo-700 hover:bg-indigo-800 dark:bg-indigo-600 dark:hover:bg-indigo-700 focus-within:ring-indigo-300 dark:focus-within:ring-indigo-800",
+            violet: "text-white bg-violet-700 hover:bg-violet-800 dark:bg-violet-600 dark:hover:bg-violet-700 focus-within:ring-violet-300 dark:focus-within:ring-violet-800",
+            purple: "text-white bg-purple-700 hover:bg-purple-800 dark:bg-purple-600 dark:hover:bg-purple-700",
+            fuchsia: "text-white bg-fuchsia-700 hover:bg-fuchsia-800 dark:bg-fuchsia-600 dark:hover:bg-fuchsia-700",
+            pink: "text-white bg-pink-700 hover:bg-pink-800 dark:bg-pink-600 dark:hover:bg-pink-700",
+            rose: "text-white bg-rose-700 hover:bg-rose-800 dark:bg-rose-600 dark:hover:bg-rose-700"
+        },
+        size: {
+            xs: "px-3 py-2 text-xs",
+            sm: "px-4 py-2 text-sm",
+            md: "px-5 py-2.5 text-sm",
+            lg: "px-5 py-3 text-base",
+            xl: "px-6 py-3.5 text-base"
+        },
+        group: {
+            true: "focus-within:ring-2 focus-within:z-10",
+            false: "focus-within:ring-4 focus-within:outline-none"
+        },
+        outline: {
+            true: "border border-gray-300 dark:border-gray-400"
+        },
+        shadow: {
+            true: "shadow-lg"
+        },
+        disabled: {
+            true: "cursor-not-allowed opacity-50"
+        },
+        pill: {
+            true: "rounded-full"
+        },
+        checked: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        // {
+        //   outline: true,
+        //   class: 'border dark:border-gray-900'
+        // },
+        // dark, alternative, light
+        // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+        {
+            shadow: true,
+            color: "dark",
+            class: "shadow-gray-500/50 dark:shadow-gray-800/80"
+        },
+        {
+            shadow: true,
+            color: "alternative",
+            class: "shadow-gray-500/50 dark:shadow-gray-800/80"
+        },
+        {
+            shadow: true,
+            color: "light",
+            class: "shadow-gray-500/50 dark:shadow-gray-800/80"
+        },
+        {
+            shadow: true,
+            color: "primary",
+            class: "shadow-primary-500/50 dark:shadow-primary-800/80"
+        },
+        {
+            shadow: true,
+            color: "secondary",
+            class: "shadow-secondary-500/50 dark:shadow-secondary-800/80"
+        },
+        {
+            shadow: true,
+            color: "gray",
+            class: "shadow-gray-500/50 dark:shadow-gray-800/80"
+        },
+        {
+            shadow: true,
+            color: "red",
+            class: "shadow-red-500/50 dark:shadow-red-800/80"
+        },
+        {
+            shadow: true,
+            color: "orange",
+            class: "shadow-orange-500/50 dark:shadow-orange-800/80"
+        },
+        {
+            shadow: true,
+            color: "amber",
+            class: "shadow-amber-500/50 dark:shadow-amber-800/80"
+        },
+        {
+            shadow: true,
+            color: "yellow",
+            class: "shadow-yellow-500/50 dark:shadow-yellow-800/80"
+        },
+        {
+            shadow: true,
+            color: "lime",
+            class: "shadow-lime-500/50 dark:shadow-lime-800/80"
+        },
+        {
+            shadow: true,
+            color: "green",
+            class: "shadow-green-500/50 dark:shadow-green-800/80"
+        },
+        {
+            shadow: true,
+            color: "emerald",
+            class: "shadow-emerald-500/50 dark:shadow-emerald-800/80"
+        },
+        {
+            shadow: true,
+            color: "teal",
+            class: "shadow-teal-500/50 dark:shadow-teal-800/80"
+        },
+        {
+            shadow: true,
+            color: "cyan",
+            class: "shadow-cyan-500/50 dark:shadow-cyan-800/80"
+        },
+        {
+            shadow: true,
+            color: "sky",
+            class: "shadow-sky-500/50 dark:shadow-sky-800/80"
+        },
+        {
+            shadow: true,
+            color: "blue",
+            class: "shadow-blue-500/50 dark:shadow-blue-800/80"
+        },
+        {
+            shadow: true,
+            color: "indigo",
+            class: "shadow-indigo-500/50 dark:shadow-indigo-800/80"
+        },
+        {
+            shadow: true,
+            color: "violet",
+            class: "shadow-violet-500/50 dark:shadow-violet-800/80"
+        },
+        {
+            shadow: true,
+            color: "purple",
+            class: "shadow-purple-500/50 dark:shadow-purple-800/80"
+        },
+        {
+            shadow: true,
+            color: "fuchsia",
+            class: "shadow-fuchsia-500/50 dark:shadow-fuchsia-800/80"
+        },
+        {
+            shadow: true,
+            color: "pink",
+            class: "shadow-pink-500/50 dark:shadow-pink-800/80"
+        },
+        {
+            shadow: true,
+            color: "rose",
+            class: "shadow-rose-500/50 dark:shadow-rose-800/80"
+        },
+        {
+            color: "alternative",
+            group: true,
+            class: "dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600"
+        },
+        {
+            color: "alternative",
+            group: true,
+            class: "dark:bg-transparent dark:border-gray-600 dark:hover:border-gray-700"
+        },
+        {
+            outline: true,
+            color: "dark",
+            group: true,
+            class: "bg-gray-900 border-gray-800 dark:border-white dark:bg-gray-600"
+        },
+        {
+            outline: true,
+            color: "dark",
+            group: true,
+            class: "dark:text-gray-400 dark:border-gray-700"
+        },
+        {
+            outline: true,
+            group: true,
+            class: "[&:not(:first-child)]:-ms-px"
+        },
+        {
+            color: "alternative",
+            group: true,
+            class: "[&:not(:first-child)]:-ms-px"
+        },
+        {
+            color: "light",
+            group: true,
+            class: "[&:not(:first-child)]:-ms-px"
+        },
+        {
+            group: true,
+            pill: true,
+            class: "rounded-none first:rounded-s-full last:rounded-e-full"
+        },
+        {
+            group: true,
+            pill: false,
+            class: "rounded-none first:rounded-s-lg last:rounded-e-lg"
+        },
+        {
+            group: false,
+            pill: true,
+            class: "rounded-full"
+        },
+        {
+            group: false,
+            pill: false,
+            class: "rounded-lg"
+        }
+    ]
+});
+export const gradientButton = tv({
+    slots: {
+        base: "inline-flex items-center justify-center transition-all duration-75 ease-in text-white bg-gradient-to-r ",
+        outlineWrapper: "inline-flex items-center justify-center w-full !border-0"
+    },
+    variants: {
+        color: {
+            blue: {
+                base: "from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-blue-300 dark:focus:ring-blue-800"
+            },
+            green: {
+                base: "from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-green-300 dark:focus:ring-green-800"
+            },
+            cyan: { base: "text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-cyan-300 dark:focus:ring-cyan-800" },
+            teal: { base: "text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-teal-300 dark:focus:ring-teal-800" },
+            lime: { base: "text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-lime-300 dark:focus:ring-lime-800" },
+            red: { base: "text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-red-300 dark:focus:ring-red-800" },
+            pink: { base: "text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-pink-300 dark:focus:ring-pink-800" },
+            purple: { base: "text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-purple-300 dark:focus:ring-purple-800" },
+            purpleToBlue: { base: "text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-blue-300 dark:focus:ring-blue-800" },
+            cyanToBlue: { base: "text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-cyan-300 dark:focus:ring-cyan-800" },
+            greenToBlue: { base: "text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-green-200 dark:focus:ring-green-800" },
+            purpleToPink: { base: "text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-purple-200 dark:focus:ring-purple-800" },
+            pinkToOrange: { base: "text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-pink-200 dark:focus:ring-pink-800" },
+            tealToLime: { base: "text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l focus:ring-lime-200 dark:focus:ring-teal-700" },
+            redToYellow: { base: "text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-red-100 dark:focus:ring-red-400" }
+        },
+        outline: {
+            true: {
+                base: "p-0.5",
+                outlineWrapper: "bg-white !text-gray-900 dark:bg-gray-900 dark:!text-white hover:bg-transparent hover:!text-inherit group-hover:!bg-opacity-0 group-hover:!text-inherit"
+            }
+        },
+        pill: {
+            true: {
+                base: "rounded-full",
+                outlineWrapper: "rounded-full"
+            },
+            false: {
+                base: "rounded-lg",
+                outlineWrapper: "rounded-lg"
+            }
+        },
+        shadow: {
+            true: {
+                base: "shadow-lg"
+            }
+        },
+        group: {
+            true: "rounded-none",
+            false: ""
+        },
+        disabled: {
+            true: { base: "opacity-50 cursor-not-allowed" }
+        }
+    },
+    compoundVariants: [
+        {
+            shadow: true,
+            color: "blue",
+            class: { base: "shadow-blue-500/50 dark:shadow-blue-800/80" }
+        },
+        {
+            shadow: true,
+            color: "green",
+            class: { base: "shadow-green-500/50 dark:shadow-green-800/80" }
+        },
+        {
+            shadow: true,
+            color: "cyan",
+            class: { base: "shadow-cyan-500/50 dark:shadow-cyan-800/80" }
+        },
+        {
+            shadow: true,
+            color: "teal",
+            class: { base: "shadow-teal-500/50 dark:shadow-teal-800/80" }
+        },
+        {
+            shadow: true,
+            color: "lime",
+            class: { base: "shadow-lime-500/50 dark:shadow-lime-800/80" }
+        },
+        {
+            shadow: true,
+            color: "red",
+            class: { base: "shadow-red-500/50 dark:shadow-red-800/80" }
+        },
+        {
+            shadow: true,
+            color: "pink",
+            class: { base: "shadow-pink-500/50 dark:shadow-pink-800/80" }
+        },
+        {
+            shadow: true,
+            color: "purple",
+            class: { base: "shadow-purple-500/50 dark:shadow-purple-800/80" }
+        },
+        {
+            shadow: true,
+            color: "purpleToBlue",
+            class: { base: "shadow-blue-500/50 dark:shadow-blue-800/80" }
+        },
+        {
+            shadow: true,
+            color: "cyanToBlue",
+            class: { base: "shadow-cyan-500/50 dark:shadow-cyan-800/80" }
+        },
+        {
+            shadow: true,
+            color: "greenToBlue",
+            class: { base: "shadow-green-500/50 dark:shadow-green-800/80" }
+        },
+        {
+            shadow: true,
+            color: "purpleToPink",
+            class: { base: "shadow-purple-500/50 dark:shadow-purple-800/80" }
+        },
+        {
+            shadow: true,
+            color: "pinkToOrange",
+            class: { base: "shadow-pink-500/50 dark:shadow-pink-800/80" }
+        },
+        {
+            shadow: true,
+            color: "tealToLime",
+            class: { base: "shadow-lime-500/50 dark:shadow-teal-800/80" }
+        },
+        {
+            shadow: true,
+            color: "redToYellow",
+            class: { base: "shadow-red-500/50 dark:shadow-red-800/80" }
+        },
+        {
+            group: true,
+            pill: true,
+            class: "first:rounded-s-full last:rounded-e-full"
+        },
+        {
+            group: true,
+            pill: false,
+            class: "first:rounded-s-lg last:rounded-e-lg"
+        }
+    ]
+});

package/dist/buttons/type.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
+type ButtonColorType = "primary" | "dark" | "alternative" | "light" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+type ButtonSizeType = "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+type HTMLAttributesWithoutAbort = Omit<HTMLButtonAttributes, "on:abort"> & Omit<HTMLAnchorAttributes, "on:abort">;
+interface ButtonProps extends HTMLAttributesWithoutAbort {
+    children: Snippet;
+    pill?: boolean;
+    outline?: boolean;
+    size?: ButtonSizeType;
+    color?: ButtonColorType;
+    shadow?: boolean;
+    tag?: string;
+    checked?: boolean;
+    class?: string;
+    disabled?: boolean;
+    href?: string;
+}
+type GradientButtonColorType = "red" | "lime" | "green" | "teal" | "cyan" | "blue" | "purple" | "pink" | "purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow" | undefined;
+interface GradientButtonProps extends HTMLAttributesWithoutAbort {
+    children: Snippet;
+    pill?: boolean;
+    outline?: boolean;
+    size?: ButtonSizeType;
+    color?: GradientButtonColorType;
+    shadow?: boolean;
+    tag?: string;
+    checked?: boolean;
+    class?: string;
+    disabled?: boolean;
+    href?: string;
+}
+export { type ButtonProps, type GradientButtonProps };

package/dist/buttons/type.js

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

package/dist/cards/Card.svelte

@@ -1,56 +1,74 @@
-<script>import { twMerge } from "tailwind-merge";
-import Frame from "../utils/Frame.svelte";
-export let href = void 0;
-export let horizontal = false;
-export let reverse = false;
-export let img = void 0;
-export let padding = "lg";
-export let size = "sm";
-export let imgClass = "";
-const paddings = {
-  none: "",
-  xs: "p-2",
-  sm: "p-4",
-  md: "p-4 sm:p-5",
-  lg: "p-4 sm:p-6",
-  xl: "p-4 sm:p-8"
-};
-const sizes = {
-  none: "",
-  xs: "max-w-xs",
-  sm: "max-w-sm",
-  md: "max-w-xl",
-  lg: "max-w-2xl",
-  xl: "max-w-screen-xl"
-};
-let innerPadding;
-$: innerPadding = paddings[padding];
-let cardClass;
-$: cardClass = twMerge("flex w-full", sizes[size], reverse ? "flex-col-reverse" : "flex-col", horizontal && (reverse ? "md:flex-row-reverse" : "md:flex-row"), href && "hover:bg-gray-100 dark:hover:bg-gray-700", !img && innerPadding, $$props.class);
-let imgCls;
-$: imgCls = twMerge(reverse ? "rounded-b-lg" : "rounded-t-lg", horizontal && "object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none", horizontal && (reverse ? "md:rounded-e-lg" : "md:rounded-s-lg"), imgClass);
+<script lang="ts">
+  import { card, type CardProps as Props } from ".";
+  import type { HTMLAttributes, HTMLAnchorAttributes } from "svelte/elements";
+
+  let { children, href, color = "gray", horizontal = false, shadow = "md", reverse = false, img, padding = "lg", size = "sm", class: className, imgClass, contentClass, ...restProps }: Props = $props();
+
+  const { base, image, content } = $derived(
+    card({
+      size,
+      color,
+      shadow,
+      padding,
+      horizontal,
+      reverse,
+      href: !!href
+    })
+  );
+
+  /* eslint-disable  @typescript-eslint/no-explicit-any */
+  const commonProps: Record<string, any> = $derived({
+    class: base({ class: className }),
+    ...restProps
+  });
+
+  const anchorProps: HTMLAnchorAttributes = $derived({
+    ...commonProps,
+    href
+  });
+
+  const divProps: HTMLAttributes<HTMLDivElement> = $derived({
+    ...commonProps
+  });
 </script>
 
-<Frame tag={href ? 'a' : 'div'} rounded shadow border on:click on:focusin on:focusout on:mouseenter on:mouseleave {href} {...$$restProps} class={cardClass}>
+{#snippet childSlot()}
   {#if img}
-    <img class={imgCls} src={img} alt="" />
-    <div class={innerPadding}>
-      <slot />
+    <img class={image({ class: imgClass })} src={img.src} alt={img.alt} />
+    <div class={content({ class: contentClass })}>
+      {@render children()}
     </div>
   {:else}
-    <slot />
+    <div class={content({ class: contentClass })}>
+      {@render children()}
+    </div>
   {/if}
-</Frame>
+{/snippet}
+
+{#if href}
+  <a {...anchorProps}>
+    {@render childSlot()}
+  </a>
+{:else}
+  <div {...divProps}>
+    {@render childSlot()}
+  </div>
+{/if}
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let href: $$Props['href'] = undefined;
-@prop export let horizontal: $$Props['horizontal'] = false;
-@prop export let reverse: $$Props['reverse'] = false;
-@prop export let img: $$Props['img'] = undefined;
-@prop export let padding: NonNullable<$$Props['padding']> = 'lg';
-@prop export let size: NonNullable<$$Props['size']> = 'sm';
-@prop export let imgClass: $$Props['imgClass'] = '';
+@props: children: any;
+@props:href: any;
+@props:color: any = "gray";
+@props:horizontal: any = false;
+@props:shadow: any = "md";
+@props:reverse: any = false;
+@props:img: any;
+@props:padding: any = "lg";
+@props:size: any = "sm";
+@props:class: string;
+@props:imgClass: any;
+@props:contentClass: any;
 -->

package/dist/cards/Card.svelte.d.ts

@@ -1,56 +1,20 @@
-import { SvelteComponentTyped } from "svelte";
-import type { SizeType } from '../types';
-declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
-        tag?: string;
-        color?: import("../utils/Frame.svelte").FrameColor;
-        rounded?: boolean;
-        border?: boolean;
-        shadow?: boolean;
-        node?: HTMLElement | undefined;
-        use?: import("svelte/action").Action<HTMLElement, any>;
-        options?: object;
-        class?: string;
-        role?: string;
-        open?: boolean;
-        transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
-        params?: any;
-    } & {
-        href?: string;
-        horizontal?: boolean;
-        reverse?: boolean;
-        img?: string;
-        padding?: SizeType | "none";
-        size?: SizeType | "none";
-        imgClass?: string;
-    };
-    events: {
-        click: MouseEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type CardProps = typeof __propDef.props;
-export type CardEvents = typeof __propDef.events;
-export type CardSlots = typeof __propDef.slots;
+import { type CardProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let href: $$Props['href'] = undefined;
- * @prop export let horizontal: $$Props['horizontal'] = false;
- * @prop export let reverse: $$Props['reverse'] = false;
- * @prop export let img: $$Props['img'] = undefined;
- * @prop export let padding: NonNullable<$$Props['padding']> = 'lg';
- * @prop export let size: NonNullable<$$Props['size']> = 'sm';
- * @prop export let imgClass: $$Props['imgClass'] = '';
+ * @props: children: any;
+ * @props:href: any;
+ * @props:color: any = "gray";
+ * @props:horizontal: any = false;
+ * @props:shadow: any = "md";
+ * @props:reverse: any = false;
+ * @props:img: any;
+ * @props:padding: any = "lg";
+ * @props:size: any = "sm";
+ * @props:class: string;
+ * @props:imgClass: any;
+ * @props:contentClass: any;
  */
-export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
-}
-export {};
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/cards/index.d.ts

@@ -0,0 +1,4 @@
+import type { CardProps } from "./type";
+import Card from "./Card.svelte";
+import { card } from "./theme";
+export { Card, card, type CardProps };

package/dist/cards/index.js

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