flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/badge/theme.js

@@ -0,0 +1,251 @@
+import { tv } from "tailwind-variants";
+const badge = tv({
+    slots: {
+        hrefClass: "flex align-middle",
+        divWrapper: "font-medium inline-flex items-center justify-center px-2.5 py-0.5"
+    },
+    variants: {
+        color: {
+            // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+            primary: { divWrapper: "bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300" },
+            secondary: { divWrapper: "bg-secondary-100 text-secondary-800 dark:bg-secondary-900 dark:text-secondary-300" },
+            gray: { divWrapper: "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300" },
+            red: { divWrapper: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300" },
+            orange: { divWrapper: "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300" },
+            amber: { divWrapper: "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300" },
+            yellow: { divWrapper: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300" },
+            lime: { divWrapper: "bg-lime-100 text-lime-800 dark:bg-lime-900 dark:text-lime-300" },
+            green: { divWrapper: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300" },
+            emerald: { divWrapper: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300" },
+            teal: { divWrapper: "bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-300" },
+            cyan: { divWrapper: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-300" },
+            sky: { divWrapper: "bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-300" },
+            blue: { divWrapper: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300" },
+            indigo: { divWrapper: "bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300" },
+            violet: { divWrapper: "bg-violet-100 text-violet-800 dark:bg-violet-900 dark:text-violet-300" },
+            fuchsia: { divWrapper: "bg-fuchsia-100 text-fuchsia-800 dark:bg-fuchsia-900 dark:text-fuchsia-300" },
+            purple: { divWrapper: "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300" },
+            pink: { divWrapper: "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300" },
+            rose: { divWrapper: "bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-300" }
+        },
+        size: {
+            small: "text-xs",
+            large: "text-sm"
+        },
+        border: {
+            true: "border"
+        },
+        rounded: {
+            true: "rounded-full",
+            false: "rounded"
+        }
+    },
+    compoundVariants: [
+        {
+            border: true,
+            color: "primary",
+            class: "bg-primary-100 text-primary-800 dark:bg-primary-700/50 dark:text-primary-400 border-primary-400 dark:border-primary-400"
+        },
+        {
+            border: true,
+            color: "secondary",
+            class: "bg-secondary-100 text-secondary-800 dark:bg-secondary-700/50 dark:text-secondary-400 border-secondary-400 dark:border-secondary-400"
+        },
+        {
+            border: true,
+            color: "gray",
+            class: "bg-gray-100 text-gray-800 dark:bg-gray-700/50 dark:text-gray-400 border-gray-400 dark:border-gray-400"
+        },
+        {
+            border: true,
+            color: "red",
+            class: "bg-red-100 text-red-800 dark:bg-red-700/50 dark:text-red-400 border-red-400 dark:border-red-400"
+        },
+        {
+            border: true,
+            color: "orange",
+            class: "bg-orange-100 text-orange-800 dark:bg-orange-700/50 dark:text-orange-400 border-orange-400 dark:border-orange-400"
+        },
+        {
+            border: true,
+            color: "amber",
+            class: "bg-amber-100 text-amber-800 dark:bg-amber-700/50 dark:text-amber-400 border-amber-400 dark:border-amber-400"
+        },
+        {
+            border: true,
+            color: "yellow",
+            class: "bg-yellow-100 text-yellow-800 dark:bg-yellow-700/50 dark:text-yellow-300 border-yellow-300 dark:border-yellow-300"
+        },
+        {
+            border: true,
+            color: "lime",
+            class: "bg-lime-100 text-lime-800 dark:bg-lime-700/50 dark:text-lime-400 border-lime-400 dark:border-lime-400"
+        },
+        {
+            border: true,
+            color: "green",
+            class: "bg-green-100 text-green-800 dark:bg-green-700/50 dark:text-green-400 border-green-400 dark:border-green-400"
+        },
+        {
+            border: true,
+            color: "emerald",
+            class: "bg-emerald-100 text-emerald-800 dark:bg-emerald-700/50 dark:text-emerald-400 border-emerald-400 dark:border-emerald-400"
+        },
+        {
+            border: true,
+            color: "teal",
+            class: "bg-teal-100 text-teal-800 dark:bg-teal-700/50 dark:text-teal-400 border-teal-400 dark:border-teal-400"
+        },
+        {
+            border: true,
+            color: "cyan",
+            class: "bg-cyan-100 text-cyan-800 dark:bg-cyan-700/50 dark:text-cyan-400 border-cyan-400 dark:border-cyan-400"
+        },
+        {
+            border: true,
+            color: "sky",
+            class: "bg-sky-100 text-sky-800 dark:bg-sky-700/50 dark:text-sky-400 border-sky-400 dark:border-sky-400"
+        },
+        {
+            border: true,
+            color: "blue",
+            class: "bg-blue-100 text-blue-800 dark:bg-blue-700/50 dark:text-blue-400 border-blue-400 dark:border-blue-400"
+        },
+        {
+            border: true,
+            color: "indigo",
+            class: "bg-indigo-100 text-indigo-800 dark:bg-indigo-700/50 dark:text-indigo-400 border-indigo-400 dark:border-indigo-400"
+        },
+        {
+            border: true,
+            color: "violet",
+            class: "bg-violet-100 text-violet-800 dark:bg-violet-700/50 dark:text-violet-400 border-violet-400 dark:border-violet-400"
+        },
+        {
+            border: true,
+            color: "purple",
+            class: "bg-purple-100 text-purple-800 dark:bg-purple-700/50 dark:text-purple-400 border-purple-400 dark:border-purple-400"
+        },
+        {
+            border: true,
+            color: "fuchsia",
+            class: "bg-fuchsia-100 text-fuchsia-800 dark:bg-fuchsia-700/50 dark:text-fuchsia-400 border-fuchsia-400 dark:border-fuchsia-400"
+        },
+        {
+            border: true,
+            color: "pink",
+            class: "bg-pink-100 text-pink-800 dark:bg-pink-700/50 dark:text-pink-400 border-pink-400 dark:border-pink-400"
+        },
+        {
+            border: true,
+            color: "rose",
+            class: "bg-rose-100 text-rose-800 dark:bg-rose-700/50 dark:text-rose-400 border-rose-400 dark:border-rose-400"
+        },
+        {
+            href: true,
+            color: "primary",
+            class: "hover:bg-primary-200"
+        },
+        {
+            href: true,
+            color: "secondary",
+            class: "hover:bg-secondary-200"
+        },
+        {
+            href: true,
+            color: "gray",
+            class: "hover:bg-gray-200"
+        },
+        {
+            href: true,
+            color: "red",
+            class: "hover:bg-red-200"
+        },
+        {
+            href: true,
+            color: "orange",
+            class: "hover:bg-orange-200"
+        },
+        {
+            href: true,
+            color: "amber",
+            class: "hover:bg-amber-200"
+        },
+        {
+            href: true,
+            color: "yellow",
+            class: "hover:bg-yellow-200"
+        },
+        {
+            href: true,
+            color: "lime",
+            class: "hover:bg-lime-200"
+        },
+        {
+            href: true,
+            color: "green",
+            class: "hover:bg-green-200"
+        },
+        {
+            href: true,
+            color: "emerald",
+            class: "hover:bg-emerald-200"
+        },
+        {
+            href: true,
+            color: "teal",
+            class: "hover:bg-teal-200"
+        },
+        {
+            href: true,
+            color: "cyan",
+            class: "hover:bg-cyan-200"
+        },
+        {
+            href: true,
+            color: "sky",
+            class: "hover:bg-sky-200"
+        },
+        {
+            href: true,
+            color: "blue",
+            class: "hover:bg-blue-200"
+        },
+        {
+            href: true,
+            color: "indigo",
+            class: "hover:bg-indigo-200"
+        },
+        {
+            href: true,
+            color: "violet",
+            class: "hover:bg-violet-200"
+        },
+        {
+            href: true,
+            color: "purple",
+            class: "hover:bg-purple-200"
+        },
+        {
+            href: true,
+            color: "fuchsia",
+            class: "hover:bg-fuchsia-200"
+        },
+        {
+            href: true,
+            color: "pink",
+            class: "hover:bg-pink-200"
+        },
+        {
+            href: true,
+            color: "rose",
+            class: "hover:bg-rose-200"
+        }
+    ],
+    defaultVariants: {
+        color: "primary",
+        size: "small",
+        rounded: false
+    }
+});
+export { badge };

package/dist/badge/type.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+import type { ParamsType, TransitionFunc } from "../types";
+import type { HTMLAttributes, HTMLAnchorAttributes } from "svelte/elements";
+type BadgeColorType = "primary" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    icon?: Snippet;
+    badgeStatus?: boolean;
+    color?: BadgeColorType;
+    large?: boolean;
+    dismissable?: boolean;
+    border?: boolean;
+    href?: HTMLAnchorAttributes["href"];
+    target?: HTMLAnchorAttributes["target"];
+    rounded?: boolean;
+    transition?: TransitionFunc;
+    params?: ParamsType;
+    onclick?: () => void;
+    aClass?: string;
+}
+export { type BadgeProps, type BadgeColorType };

package/dist/badge/type.js

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

package/dist/banner/Banner.svelte

@@ -1,48 +1,41 @@
-<script>import { twMerge } from "tailwind-merge";
-import CloseButton from "../utils/CloseButton.svelte";
-import { fade } from "svelte/transition";
-export let position = "sticky";
-export let dismissable = true;
-export let bannerType = "default";
-export let divClass = "z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600";
-export let innerClass = "flex";
-export let bannerStatus = true;
-export let transition = fade;
-export let params = {};
-export let classDiv = "";
-export let classInner = "";
-const divClasses = {
-  default: "top-0 start-0 w-full border-b border-gray-200 bg-gray-50",
-  bottom: "bottom-0 start-0 w-full border-t border-gray-200 bg-gray-50",
-  cta: "flex-col md:flex-row  w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 bg-white border border-gray-100 rounded-lg shadow-sm lg:max-w-7xl start-1/2 top-6",
-  signup: "top-0 start-0 w-full border-b border-gray-200 bg-gray-50",
-  info: "top-0 start-0 flex-col w-full border-b border-gray-200 md:flex-row bg-gray-50"
-};
-const insideDivClasses = {
-  default: "items-center mx-auto",
-  bottom: "items-center mx-auto",
-  cta: "flex-col items-start mb-3 me-4 md:items-center md:flex-row md:mb-0",
-  signup: "items-center flex-shrink-0 w-full mx-auto sm:w-auto",
-  info: "items-center flex-shrink-0"
-};
-$: divClass = twMerge(position, divClass, divClasses[bannerType], classDiv);
-$: div2Class = twMerge(innerClass, insideDivClasses[bannerType], classInner);
-function close(e) {
-  e.preventDefault();
-  bannerStatus = false;
-}
+<script lang="ts">
+  import { CloseButton } from "..";
+  import { fade } from "svelte/transition";
+  import { type BannerProps as Props, banner } from "./index";
+  import type { ParamsType } from "../types";
+
+  let { children, header, bannerStatus = $bindable(true), position = "sticky", dismissable = true, color = "gray", bannerType = "default", class: className, innerClass, transition = fade, params, ...restProps }: Props = $props();
+
+  const { base, insideDiv } = banner({
+    bannerType,
+    color
+  });
+
+  let bannerClass = $derived(base({ position, bannerType, color, className }));
+
+  let innerCls = $derived(insideDiv({ bannerType, class: innerClass }));
 </script>
 
 {#if bannerStatus}
-  <div tabindex="-1" class={divClass} {...$$restProps}
-  transition:transition={params}>
-    <slot name="header" />
-    <div class={div2Class}>
-      <slot />
+  <div tabindex="-1" class={bannerClass} {...restProps} transition:transition={params as ParamsType}>
+    {#if header}
+      {@render header()}
+    {/if}
+
+    <div class={innerCls}>
+      {@render children()}
     </div>
+
     {#if dismissable}
       <div class="flex items-center">
-        <CloseButton class="-mx-1.5 -my-1.5" color={$$restProps.color} on:click={close} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave />
+        <CloseButton
+          class="-mx-1.5 -my-1.5"
+          {color}
+          ariaLabel="Remove badge"
+          onclick={() => {
+            bannerStatus = false;
+          }}
+        />
       </div>
     {/if}
   </div>
@@ -50,16 +43,17 @@ function close(e) {
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let position: $$Props['position'] = 'sticky';
-@prop export let dismissable: $$Props['dismissable'] = true;
-@prop export let bannerType: NonNullable<$$Props['bannerType']> = 'default';
-@prop export let divClass: $$Props['divClass'] = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
-@prop export let innerClass: $$Props['innerClass'] = 'flex';
-@prop export let bannerStatus: $$Props['bannerStatus'] = true;
-@prop export let transition: NonNullable<$$Props['transition']> = fade;
-@prop export let params: $$Props['params'] = {};
-@prop export let classDiv: $$Props['classDiv'] = '';
-@prop export let classInner: $$Props['classInner'] = '';
+@props: children: any;
+@props:header: any;
+@props:bannerStatus: any = $bindable(true);
+@props:position: any = "sticky";
+@props:dismissable: any = true;
+@props:color: any = "gray";
+@props:bannerType: any = "default";
+@props:class: string;
+@props:innerClass: any;
+@props:transition: any = fade;
+@props:params: any;
 -->

package/dist/banner/Banner.svelte.d.ts

@@ -1,53 +1,19 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
-import { type TransitionConfig } from 'svelte/transition';
-declare const __propDef: {
-    props: HTMLAttributes<HTMLDivElement> & {
-        position?: "static" | "fixed" | "absolute" | "relative" | "sticky";
-        dismissable?: boolean;
-        bannerType?: "default" | "bottom" | "cta" | "signup" | "info";
-        divClass?: string;
-        innerClass?: string;
-        bannerStatus?: boolean;
-        transition?: (node: HTMLElement, params: any) => TransitionConfig;
-        params?: object;
-        classDiv?: string;
-        classInner?: string;
-    };
-    events: {
-        click: MouseEvent;
-        change: CustomEvent<any>;
-        keydown: CustomEvent<any>;
-        keyup: CustomEvent<any>;
-        focus: CustomEvent<any>;
-        blur: CustomEvent<any>;
-        mouseenter: CustomEvent<any>;
-        mouseleave: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        header: {};
-        default: {};
-    };
-};
-export type BannerProps = typeof __propDef.props;
-export type BannerEvents = typeof __propDef.events;
-export type BannerSlots = typeof __propDef.slots;
+import { type BannerProps as Props } from "./index";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let position: $$Props['position'] = 'sticky';
- * @prop export let dismissable: $$Props['dismissable'] = true;
- * @prop export let bannerType: NonNullable<$$Props['bannerType']> = 'default';
- * @prop export let divClass: $$Props['divClass'] = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
- * @prop export let innerClass: $$Props['innerClass'] = 'flex';
- * @prop export let bannerStatus: $$Props['bannerStatus'] = true;
- * @prop export let transition: NonNullable<$$Props['transition']> = fade;
- * @prop export let params: $$Props['params'] = {};
- * @prop export let classDiv: $$Props['classDiv'] = '';
- * @prop export let classInner: $$Props['classInner'] = '';
+ * @props: children: any;
+ * @props:header: any;
+ * @props:bannerStatus: any = $bindable(true);
+ * @props:position: any = "sticky";
+ * @props:dismissable: any = true;
+ * @props:color: any = "gray";
+ * @props:bannerType: any = "default";
+ * @props:class: string;
+ * @props:innerClass: any;
+ * @props:transition: any = fade;
+ * @props:params: any;
  */
-export default class Banner extends SvelteComponentTyped<BannerProps, BannerEvents, BannerSlots> {
-}
-export {};
+declare const Banner: import("svelte").Component<Props, {}, "bannerStatus">;
+type Banner = ReturnType<typeof Banner>;
+export default Banner;

package/dist/banner/index.d.ts

@@ -0,0 +1,4 @@
+import type { BannerProps } from "./type";
+import Banner from "./Banner.svelte";
+import { banner } from "./theme";
+export { Banner, banner, type BannerProps };

package/dist/banner/index.js

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