flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/avatar/theme.d.ts

@@ -0,0 +1,142 @@
+declare const avatar: import("tailwind-variants").TVReturnType<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, "relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300", import("tailwind-variants/dist/config").TVConfig<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, {
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}>, {
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, "relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300", import("tailwind-variants/dist/config").TVConfig<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, {
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}>, unknown, unknown, undefined>>;
+export { avatar };

package/dist/avatar/theme.js

@@ -0,0 +1,32 @@
+import { tv } from "tailwind-variants";
+const avatar = tv({
+    base: "relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300",
+    variants: {
+        cornerStyle: {
+            rounded: "rounded",
+            circular: "rounded-full"
+        },
+        border: {
+            true: "p-1 ring-2 ring-gray-300 dark:ring-gray-500",
+            false: ""
+        },
+        stacked: {
+            true: "border-2 -ms-4 border-white dark:border-gray-800",
+            false: ""
+        },
+        size: {
+            xs: "w-6 h-6",
+            sm: "w-8 h-8",
+            md: "w-10 h-10",
+            lg: "w-20 h-20",
+            xl: "w-36 h-36"
+        }
+    },
+    defaultVariants: {
+        cornerStyle: "circular",
+        border: false,
+        stacked: false,
+        size: "md"
+    }
+});
+export { avatar };

package/dist/avatar/type.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLAnchorAttributes } from "svelte/elements";
+interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+    children?: Snippet;
+    href?: HTMLAnchorAttributes["href"];
+    target?: HTMLAnchorAttributes["target"];
+    src?: string;
+    cornerStyle?: "rounded" | "circular";
+    stacked?: boolean;
+    dot?: object | undefined;
+    alt?: string;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    onclick?: () => void;
+    border?: boolean;
+}
+export { type AvatarProps };

package/dist/avatar/type.js

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

package/dist/badge/Badge.svelte

@@ -1,96 +1,78 @@
-<script>import { createEventDispatcher } from "svelte";
-import { twMerge } from "tailwind-merge";
-import { CloseButton } from "..";
-import { fade } from "svelte/transition";
-const dispatcher = createEventDispatcher();
-export let color = "primary";
-export let large = false;
-export let dismissable = false;
-export let border = false;
-export let href = "";
-export let rounded = false;
-export let transition = fade;
-export let params = {};
-let badgeStatus = true;
-const colors = {
-  primary: "bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300",
-  dark: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300",
-  blue: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
-  red: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
-  green: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
-  yellow: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300",
-  indigo: "bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300",
-  purple: "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300",
-  pink: "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300",
-  none: ""
-};
-const borderedColors = {
-  primary: "bg-primary-100 text-primary-800 dark:bg-gray-700 dark:text-primary-400 border-primary-400 dark:border-primary-400",
-  dark: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400 border-gray-400 dark:border-gray-400",
-  blue: "bg-blue-100 text-blue-800 dark:bg-gray-700 dark:text-blue-400 border-blue-400 dark:border-blue-400",
-  red: "bg-red-100 text-red-800 dark:bg-gray-700 dark:text-red-400 border-red-400 dark:border-red-400",
-  green: "bg-green-100 text-green-800 dark:bg-gray-700 dark:text-green-400 border-green-400 dark:border-green-400",
-  yellow: "bg-yellow-100 text-yellow-800 dark:bg-gray-700 dark:text-yellow-300 border-yellow-300 dark:border-yellow-300",
-  indigo: "bg-indigo-100 text-indigo-800 dark:bg-gray-700 dark:text-indigo-400 border-indigo-400 dark:border-indigo-400",
-  purple: "bg-purple-100 text-purple-800 dark:bg-gray-700 dark:text-purple-400 border-purple-400 dark:border-purple-400",
-  pink: "bg-pink-100 text-pink-800 dark:bg-gray-700 dark:text-pink-400 border-pink-400 dark:border-pink-400",
-  none: ""
-};
-const hoverColors = {
-  primary: "hover:bg-primary-200",
-  dark: "hover:bg-gray-200",
-  blue: "hover:bg-blue-200",
-  red: "hover:bg-red-200",
-  green: "hover:bg-green-200",
-  yellow: "hover:bg-yellow-200",
-  indigo: "hover:bg-indigo-200",
-  purple: "hover:bg-purple-200",
-  pink: "hover:bg-pink-200",
-  none: ""
-};
-const close = () => {
-  badgeStatus = false;
-};
-const baseClass = "font-medium inline-flex items-center justify-center px-2.5 py-0.5";
-let badgeClass;
-$: badgeClass = twMerge(baseClass, large ? "text-sm" : "text-xs", border ? `border ${borderedColors[color]}` : colors[color], href && hoverColors[color], rounded ? "rounded-full" : "rounded", $$restProps.class);
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { type BadgeProps as Props, badge } from "./index";
+  import { CloseButton } from "..";
+  import { fade } from "svelte/transition";
+  import type { ParamsType } from "../types";
+
+  let { children, icon, badgeStatus = $bindable(true), color = "primary", large = false, dismissable = false, class: className, border, href, target, rounded, transition = fade, params, aClass, onclick, ...restProps }: Props = $props();
+
+  // Get merged theme from context
+  const context = getContext<Record<string, object>>("themeConfig");
+  // Use context theme if available, otherwise fallback to default
+  const badgeTheme = context?.badge || badge;
+
+  const { divWrapper, hrefClass } = $derived(badgeTheme({ color, size: large ? "large" : "small", border, rounded }));
+  // $inspect('badgeStatus: ', badgeStatus);
 </script>
 
 {#if badgeStatus}
-  <div {...$$restProps} transition:transition={params} class={badgeClass} on:close>
+  <div {...restProps} transition:transition={params as ParamsType} class={divWrapper({ className })}>
     {#if href}
-      <a {href}>
-        <slot></slot>
+      <a {href} {target} class={hrefClass({ class: aClass })}>
+        {@render children()}
       </a>
     {:else}
-      <slot></slot>
+      {@render children()}
     {/if}
+
     {#if dismissable}
-      <slot name="close-button" {close}>
+      {#if icon}
+        <button
+          type="button"
+          class="m-0.5 -me-1.5 ms-1.5 whitespace-normal rounded p-0.5 text-primary-500 hover:bg-primary-200 focus:outline-none focus:ring-1 focus:ring-primary-400 dark:hover:bg-primary-800 dark:hover:text-primary-300"
+          aria-label="Remove badge"
+          onclick={() => {
+            badgeStatus = false;
+          }}
+        >
+          <span class="sr-only">Remove badge</span>
+          {@render icon()}
+        </button>
+      {:else if onclick}
+        <CloseButton class="-me-1.5 ms-1.5" {color} size={large ? "sm" : "xs"} ariaLabel="Remove badge" {onclick} />
+      {:else}
         <CloseButton
-          divclass="ms-1.5 -me-1.5"
+          class="-me-1.5 ms-1.5"
           {color}
-          size={large ? 'sm' : 'xs'}
+          size={large ? "sm" : "xs"}
           ariaLabel="Remove badge"
-          on:click={() => {
+          onclick={() => {
             badgeStatus = false;
-            dispatcher('close');
-          }} />
-      </slot>
+          }}
+        />
+      {/if}
     {/if}
   </div>
 {/if}
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let color: NonNullable<$$Props['color']> = 'primary';
-@prop export let large: $$Props['large'] = false;
-@prop export let dismissable: $$Props['dismissable'] = false;
-@prop export let border: $$Props['border'] = false;
-@prop export let href: $$Props['href'] = '';
-@prop export let rounded: $$Props['rounded'] = false;
-@prop export let transition: NonNullable<$$Props['transition']> = fade;
-@prop export let params: $$Props['params'] = {};
+@props: children: any;
+@props:icon: any;
+@props:badgeStatus: any = $bindable(true);
+@props:color: any = "primary";
+@props:large: any = false;
+@props:dismissable: any = false;
+@props:class: string;
+@props:border: any;
+@props:href: any;
+@props:target: any;
+@props:rounded: any;
+@props:transition: any = fade;
+@props:params: any;
+@props:aClass: any;
+@props:onclick: any;
 -->

package/dist/badge/Badge.svelte.d.ts

@@ -1,45 +1,23 @@
-import { SvelteComponentTyped } from "svelte";
-import type { ColorVariant } from '../types';
-import type { HTMLAttributes } from 'svelte/elements';
-import { type TransitionConfig } from 'svelte/transition';
-declare const __propDef: {
-    props: HTMLAttributes<HTMLDivElement> & {
-        color?: ColorVariant;
-        large?: boolean;
-        dismissable?: boolean;
-        border?: boolean;
-        href?: string;
-        rounded?: boolean;
-        transition?: (node: HTMLElement, params: any) => TransitionConfig;
-        params?: object;
-    };
-    events: {
-        close: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        'close-button': {
-            close: () => void;
-        };
-    };
-};
-export type BadgeProps = typeof __propDef.props;
-export type BadgeEvents = typeof __propDef.events;
-export type BadgeSlots = typeof __propDef.slots;
+import { type BadgeProps as Props } from "./index";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let color: NonNullable<$$Props['color']> = 'primary';
- * @prop export let large: $$Props['large'] = false;
- * @prop export let dismissable: $$Props['dismissable'] = false;
- * @prop export let border: $$Props['border'] = false;
- * @prop export let href: $$Props['href'] = '';
- * @prop export let rounded: $$Props['rounded'] = false;
- * @prop export let transition: NonNullable<$$Props['transition']> = fade;
- * @prop export let params: $$Props['params'] = {};
+ * @props: children: any;
+ * @props:icon: any;
+ * @props:badgeStatus: any = $bindable(true);
+ * @props:color: any = "primary";
+ * @props:large: any = false;
+ * @props:dismissable: any = false;
+ * @props:class: string;
+ * @props:border: any;
+ * @props:href: any;
+ * @props:target: any;
+ * @props:rounded: any;
+ * @props:transition: any = fade;
+ * @props:params: any;
+ * @props:aClass: any;
+ * @props:onclick: any;
  */
-export default class Badge extends SvelteComponentTyped<BadgeProps, BadgeEvents, BadgeSlots> {
-}
-export {};
+declare const Badge: import("svelte").Component<Props, {}, "badgeStatus">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/badge/index.d.ts

@@ -0,0 +1,4 @@
+import type { BadgeProps, BadgeColorType } from "./type";
+import Badge from "./Badge.svelte";
+import { badge } from "./theme";
+export { Badge, badge, type BadgeProps, type BadgeColorType };

package/dist/badge/index.js

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