flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/indicator/theme.d.ts

@@ -0,0 +1,417 @@
+import { type VariantProps } from "tailwind-variants";
+export type IndicatorVariants = VariantProps<typeof indicator>;
+export declare const indicator: import("tailwind-variants").TVReturnType<{
+    color: {
+        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;
+        };
+    };
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+    cornerStyle: {
+        rounded: {
+            base: string;
+        };
+        circular: {
+            base: string;
+        };
+    };
+    border: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    hasChildren: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    placement: {
+        default: {
+            base: string;
+        };
+        "top-left": {
+            base: string;
+        };
+        "top-center": {
+            base: string;
+        };
+        "top-right": {
+            base: string;
+        };
+        "center-left": {
+            base: string;
+        };
+        center: {
+            base: string;
+        };
+        "center-right": {
+            base: string;
+        };
+        "bottom-left": {
+            base: string;
+        };
+        "bottom-center": {
+            base: string;
+        };
+        "bottom-right": {
+            base: string;
+        };
+    };
+    offset: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+}, undefined, {
+    color: {
+        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;
+        };
+    };
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+    cornerStyle: {
+        rounded: {
+            base: string;
+        };
+        circular: {
+            base: string;
+        };
+    };
+    border: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    hasChildren: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    placement: {
+        default: {
+            base: string;
+        };
+        "top-left": {
+            base: string;
+        };
+        "top-center": {
+            base: string;
+        };
+        "top-right": {
+            base: string;
+        };
+        "center-left": {
+            base: string;
+        };
+        center: {
+            base: string;
+        };
+        "center-right": {
+            base: string;
+        };
+        "bottom-left": {
+            base: string;
+        };
+        "bottom-center": {
+            base: string;
+        };
+        "bottom-right": {
+            base: string;
+        };
+    };
+    offset: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        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;
+        };
+    };
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+    cornerStyle: {
+        rounded: {
+            base: string;
+        };
+        circular: {
+            base: string;
+        };
+    };
+    border: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    hasChildren: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    placement: {
+        default: {
+            base: string;
+        };
+        "top-left": {
+            base: string;
+        };
+        "top-center": {
+            base: string;
+        };
+        "top-right": {
+            base: string;
+        };
+        "center-left": {
+            base: string;
+        };
+        center: {
+            base: string;
+        };
+        "center-right": {
+            base: string;
+        };
+        "bottom-left": {
+            base: string;
+        };
+        "bottom-center": {
+            base: string;
+        };
+        "bottom-right": {
+            base: string;
+        };
+    };
+    offset: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/indicator/theme.js

@@ -0,0 +1,122 @@
+import { tv } from "tailwind-variants";
+export const indicator = tv({
+    slots: {
+        base: "shrink-0"
+    },
+    variants: {
+        color: {
+            // 'primary' secondary 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'
+            primary: { base: "bg-primary-500" },
+            secondary: { base: "bg-secondary-500" },
+            gray: { base: "bg-gray-200" },
+            red: { base: "bg-red-500" },
+            orange: { base: "bg-orange-600" },
+            amber: { base: "bg-amber-500" },
+            yellow: { base: "bg-yellow-300" },
+            lime: { base: "bg-lime-500" },
+            green: { base: "bg-green-500" },
+            emerald: { base: "bg-emerald-500" },
+            teal: { base: "bg-teal-500" },
+            cyan: { base: "bg-cyan-500" },
+            sky: { base: "bg-sky-500" },
+            blue: { base: "bg-blue-500" },
+            indigo: { base: "bg-indigo-500" },
+            violet: { base: "bg-violet-500" },
+            purple: { base: "bg-purple-500" },
+            fuchsia: { base: "bg-fuchsia-500" },
+            pink: { base: "bg-pink-500" },
+            rose: { base: "bg-rose-500" }
+        },
+        size: {
+            xs: { base: "w-2 h-2" },
+            sm: { base: "w-2.5 h-2.5" },
+            md: { base: "w-3 h-3" },
+            lg: { base: "w-3.5 h-3.5" },
+            xl: { base: "w-6 h-6" }
+        },
+        cornerStyle: {
+            rounded: { base: "rounded-sm" },
+            circular: { base: "rounded-full" }
+        },
+        border: {
+            true: { base: "border border-gray-300 dark:border-gray-300" },
+            false: {}
+        },
+        hasChildren: {
+            true: { base: "inline-flex items-center justify-center" },
+            false: {}
+        },
+        placement: {
+            default: { base: "" },
+            "top-left": { base: "absolute top-0 start-0" },
+            "top-center": {
+                base: "absolute top-0 start-1/2 -translate-x-1/2 rtl:translate-x-1/2"
+            },
+            "top-right": { base: "absolute top-0 end-0" },
+            "center-left": { base: "absolute top-1/2 -translate-y-1/2 start-0" },
+            center: {
+                base: "absolute top-1/2 -translate-y-1/2 start-1/2 -translate-x-1/2 rtl:translate-x-1/2"
+            },
+            "center-right": { base: "absolute top-1/2 -translate-y-1/2 end-0" },
+            "bottom-left": { base: "absolute bottom-0 start-0" },
+            "bottom-center": {
+                base: "absolute bottom-0 start-1/2 -translate-x-1/2 rtl:translate-x-1/2"
+            },
+            "bottom-right": { base: "absolute bottom-0 end-0" }
+        },
+        offset: {
+            true: {},
+            false: {}
+        }
+    },
+    compoundVariants: [
+        {
+            placement: "top-left",
+            offset: true,
+            class: { base: "-translate-x-1/3 rtl:translate-x-1/3 -translate-y-1/3" }
+        },
+        {
+            placement: "top-center",
+            offset: true,
+            class: { base: "-translate-y-1/3" }
+        },
+        {
+            placement: "top-right",
+            offset: true,
+            class: { base: "translate-x-1/3 rtl:-translate-x-1/3 -translate-y-1/3" }
+        },
+        {
+            placement: "center-left",
+            offset: true,
+            class: { base: "-translate-x-1/3 rtl:translate-x-1/3" }
+        },
+        {
+            placement: "center-right",
+            offset: true,
+            class: { base: "translate-x-1/3 rtl:-translate-x-1/3" }
+        },
+        {
+            placement: "bottom-left",
+            offset: true,
+            class: { base: "-translate-x-1/3 rtl:translate-x-1/3 translate-y-1/3" }
+        },
+        {
+            placement: "bottom-center",
+            offset: true,
+            class: { base: "translate-y-1/3" }
+        },
+        {
+            placement: "bottom-right",
+            offset: true,
+            class: { base: "translate-x-1/3 rtl:-translate-x-1/3 translate-y-1/3" }
+        }
+    ],
+    defaultVariants: {
+        color: "primary",
+        size: "md",
+        cornerStyle: "circular",
+        border: false,
+        offset: true,
+        hasChildren: false
+    }
+});

package/dist/indicator/type.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { IndicatorVariants } from "./theme";
+interface IndicatorProps extends HTMLAttributes<HTMLDivElement> {
+    children?: Snippet;
+    color?: IndicatorVariants["color"];
+    cornerStyle?: IndicatorVariants["cornerStyle"];
+    size?: IndicatorVariants["size"];
+    border?: boolean;
+    placement?: IndicatorVariants["placement"];
+    offset?: boolean;
+}
+export { type IndicatorProps };

package/dist/indicator/type.js

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

package/dist/kbd/Kbd.svelte

@@ -1,14 +1,19 @@
-<script>import { twMerge } from "tailwind-merge";
-export let kbdClass = "text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500";
+<script lang="ts">
+  import clsx from "clsx";
+  import { kbd, type KbdProps as Props } from ".";
+
+  let { children, class: className, ...restProps }: Props = $props();
+  const kbdCls = kbd({ class: clsx(className) });
 </script>
 
-<kbd class={twMerge(kbdClass, $$props.class)}>
-  <slot />
+<kbd {...restProps} class={kbdCls}>
+  {@render children()}
 </kbd>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let kbdClass: $$Props['kbdClass'] = 'text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500';
+@props: children: any;
+@props:class: string;
 -->

package/dist/kbd/Kbd.svelte.d.ts

@@ -1,24 +1,20 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLDivElement> & {
-        kbdClass?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type KbdProps = typeof __propDef.props;
+type KbdProps_ = typeof __propDef.props;
+export { KbdProps_ as KbdProps };
 export type KbdEvents = typeof __propDef.events;
 export type KbdSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let kbdClass: $$Props['kbdClass'] = 'text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500';
+ * @props: children: any;
+ * @props:class: string;
  */
-export default class Kbd extends SvelteComponentTyped<KbdProps, KbdEvents, KbdSlots> {
+export default class Kbd extends SvelteComponentTyped<KbdProps_, KbdEvents, KbdSlots> {
 }
-export {};

package/dist/kbd/index.d.ts

@@ -0,0 +1,4 @@
+import type { KbdProps } from "./type";
+import Kbd from "./Kbd.svelte";
+import { kbd } from "./theme";
+export { Kbd, kbd, type KbdProps };

package/dist/kbd/index.js

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

package/dist/kbd/theme.d.ts

@@ -0,0 +1 @@
+export declare const kbd: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500", unknown, unknown, undefined>>;

package/dist/kbd/theme.js

@@ -0,0 +1,4 @@
+import { tv } from "tailwind-variants";
+export const kbd = tv({
+    base: "px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500"
+});

package/dist/kbd/type.d.ts

@@ -0,0 +1,6 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+interface KbdProps extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+}
+export { type KbdProps };

package/dist/kbd/type.js

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