flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/datepicker/theme.d.ts

@@ -0,0 +1,364 @@
+export declare const datepicker: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            input: string;
+            dayButton: string;
+        };
+        blue: {
+            input: string;
+            dayButton: string;
+        };
+        red: {
+            input: string;
+            dayButton: string;
+        };
+        green: {
+            input: string;
+            dayButton: string;
+        };
+        yellow: {
+            input: string;
+            dayButton: string;
+        };
+        purple: {
+            input: string;
+            dayButton: string;
+        };
+        dark: {
+            input: string;
+            dayButton: string;
+        };
+        light: {
+            input: string;
+            dayButton: string;
+        };
+        alternative: {
+            input: string;
+            dayButton: string;
+        };
+        secondary: {
+            input: string;
+            dayButton: string;
+        };
+        gray: {
+            input: string;
+            dayButton: string;
+        };
+        orange: {
+            input: string;
+            dayButton: string;
+        };
+        amber: {
+            input: string;
+            dayButton: string;
+        };
+        lime: {
+            input: string;
+            dayButton: string;
+        };
+        emerald: {
+            input: string;
+            dayButton: string;
+        };
+        teal: {
+            input: string;
+            dayButton: string;
+        };
+        cyan: {
+            input: string;
+            dayButton: string;
+        };
+        sky: {
+            input: string;
+            dayButton: string;
+        };
+        indigo: {
+            input: string;
+            dayButton: string;
+        };
+        violet: {
+            input: string;
+            dayButton: string;
+        };
+        fuchsia: {
+            input: string;
+            dayButton: string;
+        };
+        pink: {
+            input: string;
+            dayButton: string;
+        };
+        rose: {
+            input: string;
+            dayButton: string;
+        };
+    };
+    inline: {
+        false: {
+            base: string;
+        };
+    };
+    current: {
+        true: {
+            dayButton: string;
+        };
+    };
+    today: {
+        true: {
+            dayButton: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    titleVariant: string;
+    button: string;
+    actionButtons: string;
+    columnHeader: string;
+    polite: string;
+    grid: string;
+    nav: string;
+    dayButton: string;
+}, undefined, {
+    color: {
+        primary: {
+            input: string;
+            dayButton: string;
+        };
+        blue: {
+            input: string;
+            dayButton: string;
+        };
+        red: {
+            input: string;
+            dayButton: string;
+        };
+        green: {
+            input: string;
+            dayButton: string;
+        };
+        yellow: {
+            input: string;
+            dayButton: string;
+        };
+        purple: {
+            input: string;
+            dayButton: string;
+        };
+        dark: {
+            input: string;
+            dayButton: string;
+        };
+        light: {
+            input: string;
+            dayButton: string;
+        };
+        alternative: {
+            input: string;
+            dayButton: string;
+        };
+        secondary: {
+            input: string;
+            dayButton: string;
+        };
+        gray: {
+            input: string;
+            dayButton: string;
+        };
+        orange: {
+            input: string;
+            dayButton: string;
+        };
+        amber: {
+            input: string;
+            dayButton: string;
+        };
+        lime: {
+            input: string;
+            dayButton: string;
+        };
+        emerald: {
+            input: string;
+            dayButton: string;
+        };
+        teal: {
+            input: string;
+            dayButton: string;
+        };
+        cyan: {
+            input: string;
+            dayButton: string;
+        };
+        sky: {
+            input: string;
+            dayButton: string;
+        };
+        indigo: {
+            input: string;
+            dayButton: string;
+        };
+        violet: {
+            input: string;
+            dayButton: string;
+        };
+        fuchsia: {
+            input: string;
+            dayButton: string;
+        };
+        pink: {
+            input: string;
+            dayButton: string;
+        };
+        rose: {
+            input: string;
+            dayButton: string;
+        };
+    };
+    inline: {
+        false: {
+            base: string;
+        };
+    };
+    current: {
+        true: {
+            dayButton: string;
+        };
+    };
+    today: {
+        true: {
+            dayButton: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    titleVariant: string;
+    button: string;
+    actionButtons: string;
+    columnHeader: string;
+    polite: string;
+    grid: string;
+    nav: string;
+    dayButton: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            input: string;
+            dayButton: string;
+        };
+        blue: {
+            input: string;
+            dayButton: string;
+        };
+        red: {
+            input: string;
+            dayButton: string;
+        };
+        green: {
+            input: string;
+            dayButton: string;
+        };
+        yellow: {
+            input: string;
+            dayButton: string;
+        };
+        purple: {
+            input: string;
+            dayButton: string;
+        };
+        dark: {
+            input: string;
+            dayButton: string;
+        };
+        light: {
+            input: string;
+            dayButton: string;
+        };
+        alternative: {
+            input: string;
+            dayButton: string;
+        };
+        secondary: {
+            input: string;
+            dayButton: string;
+        };
+        gray: {
+            input: string;
+            dayButton: string;
+        };
+        orange: {
+            input: string;
+            dayButton: string;
+        };
+        amber: {
+            input: string;
+            dayButton: string;
+        };
+        lime: {
+            input: string;
+            dayButton: string;
+        };
+        emerald: {
+            input: string;
+            dayButton: string;
+        };
+        teal: {
+            input: string;
+            dayButton: string;
+        };
+        cyan: {
+            input: string;
+            dayButton: string;
+        };
+        sky: {
+            input: string;
+            dayButton: string;
+        };
+        indigo: {
+            input: string;
+            dayButton: string;
+        };
+        violet: {
+            input: string;
+            dayButton: string;
+        };
+        fuchsia: {
+            input: string;
+            dayButton: string;
+        };
+        pink: {
+            input: string;
+            dayButton: string;
+        };
+        rose: {
+            input: string;
+            dayButton: string;
+        };
+    };
+    inline: {
+        false: {
+            base: string;
+        };
+    };
+    current: {
+        true: {
+            dayButton: string;
+        };
+    };
+    today: {
+        true: {
+            dayButton: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    titleVariant: string;
+    button: string;
+    actionButtons: string;
+    columnHeader: string;
+    polite: string;
+    grid: string;
+    nav: string;
+    dayButton: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/datepicker/theme.js

@@ -0,0 +1,52 @@
+import { tv } from "tailwind-variants";
+export const datepicker = tv({
+    slots: {
+        base: "rounded-md bg-white shadow-lg dark:bg-gray-800",
+        input: "w-full rounded-md border px-4 py-2 text-sm focus:ring-2 focus:outline-none outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white",
+        titleVariant: "mb-4 text-lg font-semibold dark:text-white",
+        button: "absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 focus:outline-hidden dark:text-gray-400",
+        actionButtons: "mt-4 flex justify-between",
+        columnHeader: "text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+        polite: "text-lg font-semibold dark:text-white",
+        grid: "grid grid-cols-7 gap-1",
+        nav: "mb-4 flex items-center justify-between",
+        dayButton: "h-8 w-full"
+    },
+    variants: {
+        color: {
+            primary: { input: "focus:ring-primary-500 dark:focus:ring-primary-400", dayButton: "bg-primary-100 dark:bg-primary-900" },
+            blue: { input: "focus:ring-blue-500 dark:focus:ring-blue-400", dayButton: "bg-blue-100 dark:bg-blue-900" },
+            red: { input: "focus:ring-red-500 dark:focus:ring-red-400", dayButton: "bg-red-100 dark:bg-red-900" },
+            green: { input: "focus:ring-green-500 dark:focus:ring-green-400", dayButton: "bg-green-100 dark:bg-green-900" },
+            yellow: { input: "focus:ring-yellow-500 dark:focus:ring-yellow-400", dayButton: "bg-yellow-100 dark:bg-yellow-900" },
+            purple: { input: "focus:ring-purple-500 dark:focus:ring-purple-400", dayButton: "bg-purple-100 dark:bg-purple-900" },
+            dark: { input: "focus:ring-dark-500 dark:focus:ring-dark-400", dayButton: "bg-dark-100 dark:bg-dark-900" },
+            light: { input: "focus:ring-light-500 dark:focus:ring-light-400", dayButton: "bg-light-100 dark:bg-light-900" },
+            alternative: { input: "focus:ring-alternative-500 dark:focus:ring-alternative-400", dayButton: "bg-alternative-100 dark:bg-alternative-900" },
+            secondary: { input: "focus:ring-secondary-500 dark:focus:ring-secondary-400", dayButton: "bg-secondary-100 dark:bg-secondary-900" },
+            gray: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-100 dark:bg-gray-900" },
+            orange: { input: "focus:ring-orange-500 dark:focus:ring-orange-400", dayButton: "bg-orange-100 dark:bg-orange-900" },
+            amber: { input: "focus:ring-amber-500 dark:focus:ring-amber-400", dayButton: "bg-amber-100 dark:bg-amber-900" },
+            lime: { input: "focus:ring-lime-500 dark:focus:ring-lime-400", dayButton: "bg-lime-100 dark:bg-lime-900" },
+            emerald: { input: "focus:ring-emerald-500 dark:focus:ring-emerald-400", dayButton: "bg-emerald-100 dark:bg-emerald-900" },
+            teal: { input: "focus:ring-teal-500 dark:focus:ring-teal-400", dayButton: "bg-teal-100 dark:bg-teal-900" },
+            cyan: { input: "focus:ring-cyan-500 dark:focus:ring-cyan-400", dayButton: "bg-cyan-100 dark:bg-cyan-900" },
+            sky: { input: "focus:ring-sky-500 dark:focus:ring-sky-400", dayButton: "bg-sky-100 dark:bg-sky-900" },
+            indigo: { input: "focus:ring-indigo-500 dark:focus:ring-indigo-400", dayButton: "bg-indigo-100 dark:bg-indigo-900" },
+            violet: { input: "focus:ring-violet-500 dark:focus:ring-violet-400", dayButton: "bg-violet-100 dark:bg-violet-900" },
+            fuchsia: { input: "focus:ring-fuchsia-500 dark:focus:ring-fuchsia-400", dayButton: "bg-fuchsia-100 dark:bg-fuchsia-900" },
+            pink: { input: "focus:ring-pink-500 dark:focus:ring-pink-400", dayButton: "bg-pink-100 dark:bg-pink-900" },
+            rose: { input: "focus:ring-rose-500 dark:focus:ring-rose-400", dayButton: "bg-rose-100 dark:bg-rose-900" }
+        },
+        inline: {
+            false: { base: "absolute z-10 mt-1" }
+        },
+        current: {
+            true: { dayButton: "text-gray-300 dark:text-gray-600" }
+        },
+        today: {
+            true: { dayButton: "font-bold" }
+        }
+    },
+    compoundVariants: []
+});

package/dist/datepicker/type.d.ts

@@ -0,0 +1,29 @@
+import type { ButtonProps } from "../buttons";
+import type { HTMLAttributes } from "svelte/elements";
+type DateOrRange = Date | {
+    from?: Date;
+    to?: Date;
+};
+interface DatepickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onselect"> {
+    value?: Date;
+    defaultDate?: Date | null;
+    range: boolean;
+    rangeFrom?: Date;
+    rangeTo?: Date;
+    locale: string;
+    firstDayOfWeek: number;
+    dateFormat: Intl.DateTimeFormatOptions;
+    placeholder: string;
+    disabled: boolean;
+    required: boolean;
+    inputClass: string;
+    color: ButtonProps["color"];
+    inline: boolean;
+    autohide: boolean;
+    showActionButtons: boolean;
+    title: string;
+    onselect?: (x: DateOrRange) => void;
+    onclear?: () => void;
+    onapply?: (x: DateOrRange) => void;
+}
+export { type DatepickerProps };

package/dist/datepicker/type.js

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

package/dist/device-mockups/Android.svelte

@@ -1,27 +1,21 @@
-<script>import { twMerge } from "tailwind-merge";
-export let div = "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl";
-export let slot = "rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800";
-export let top = "w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute";
-export let leftTop = "h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg";
-export let leftMid = "h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg";
-export let leftBot = "h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg";
-export let right = "h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg";
-export let classTop = "";
-export let classLeftTop = "";
-export let classLeftMid = "";
-export let classLeftBot = "";
-export let classRight = "";
-export let classSlot = "";
+<script lang="ts">
+  import { type AndroidProps as Props, android } from ".";
+
+  let { children, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class, ...restProps }: Props = $props();
+
+  const { div, slot, top, leftTop, leftMid, leftBot, right } = android();
 </script>
 
-<div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(top, classTop)}></div>
-  <div class={twMerge(leftTop, classLeftTop)}></div>
-  <div class={twMerge(leftMid, classLeftMid)}></div>
-  <div class={twMerge(leftBot, classLeftBot)}></div>
-  <div class={twMerge(right, classRight)}></div>
-  <div class={twMerge(slot, classSlot)}>
-    <slot></slot>
+<div {...restProps} class={div({ class: divClass })}>
+  <div class={top({ class: div2Class })}></div>
+  <div class={leftTop({ class: div3Class })}></div>
+  <div class={leftMid({ class: div4Class })}></div>
+  <div class={leftBot({ class: div5Class })}></div>
+  <div class={right({ class: div6Class })}></div>
+  <div class={slot({ class: div7Class })}>
+    {#if children}
+      {@render children()}
+    {/if}
   </div>
 </div>
 
@@ -29,17 +23,12 @@ export let classSlot = "";
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let div: $$Props['div'] = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl';
-@prop export let slot: $$Props['slot'] = 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-@prop export let top: $$Props['top'] = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
-@prop export let leftTop: $$Props['leftTop'] = 'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-@prop export let leftMid: $$Props['leftMid'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-@prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-@prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-@prop export let classTop: $$Props['classTop'] = '';
-@prop export let classLeftTop: $$Props['classLeftTop'] = '';
-@prop export let classLeftMid: $$Props['classLeftMid'] = '';
-@prop export let classLeftBot: $$Props['classLeftBot'] = '';
-@prop export let classRight: $$Props['classRight'] = '';
-@prop export let classSlot: $$Props['classSlot'] = '';
+@props: children: any;
+@props:divClass: any;
+@props:div2Class: any;
+@props:div3Class: any;
+@props:div4Class: any;
+@props:div5Class: any;
+@props:div6Class: any;
+@props:div7Class: any;
 -->

package/dist/device-mockups/Android.svelte.d.ts

@@ -1,48 +1,26 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        div?: string;
-        slot?: string;
-        top?: string;
-        leftTop?: string;
-        leftMid?: string;
-        leftBot?: string;
-        right?: string;
-        classTop?: string;
-        classLeftTop?: string;
-        classLeftMid?: string;
-        classLeftBot?: string;
-        classRight?: string;
-        classSlot?: string;
-        class?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type AndroidProps = typeof __propDef.props;
+type AndroidProps_ = typeof __propDef.props;
+export { AndroidProps_ as AndroidProps };
 export type AndroidEvents = typeof __propDef.events;
 export type AndroidSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let div: $$Props['div'] = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl';
- * @prop export let slot: $$Props['slot'] = 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
- * @prop export let top: $$Props['top'] = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
- * @prop export let leftTop: $$Props['leftTop'] = 'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
- * @prop export let leftMid: $$Props['leftMid'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
- * @prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
- * @prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
- * @prop export let classTop: $$Props['classTop'] = '';
- * @prop export let classLeftTop: $$Props['classLeftTop'] = '';
- * @prop export let classLeftMid: $$Props['classLeftMid'] = '';
- * @prop export let classLeftBot: $$Props['classLeftBot'] = '';
- * @prop export let classRight: $$Props['classRight'] = '';
- * @prop export let classSlot: $$Props['classSlot'] = '';
+ * @props: children: any;
+ * @props:divClass: any;
+ * @props:div2Class: any;
+ * @props:div3Class: any;
+ * @props:div4Class: any;
+ * @props:div5Class: any;
+ * @props:div6Class: any;
+ * @props:div7Class: any;
  */
-export default class Android extends SvelteComponentTyped<AndroidProps, AndroidEvents, AndroidSlots> {
+export default class Android extends SvelteComponentTyped<AndroidProps_, AndroidEvents, AndroidSlots> {
 }
-export {};

package/dist/device-mockups/DefaultMockup.svelte

@@ -1,24 +1,20 @@
-<script>import { twMerge } from "tailwind-merge";
-export let div = "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]";
-export let slot = "rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800";
-export let top = "h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg";
-export let leftTop = "h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg";
-export let leftBot = "h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg";
-export let right = "h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg";
-export let classTop = "";
-export let classLeftTop = "";
-export let classLeftBot = "";
-export let classRight = "";
-export let classSlot = "";
+<script lang="ts">
+  import { type DefaultMockupProps as Props, defaultMockup } from ".";
+
+  let { children, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: Props = $props();
+
+  const { div, slot, top, leftTop, leftBot, right } = defaultMockup();
 </script>
 
-<div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(top, classTop)}></div>
-  <div class={twMerge(leftTop, classLeftTop)}></div>
-  <div class={twMerge(leftBot, classLeftBot)}></div>
-  <div class={twMerge(right, classRight)}></div>
-  <div class={twMerge(slot, classSlot)}>
-    <slot></slot>
+<div {...restProps} class={div({ class: divClass })}>
+  <div class={top({ class: div2Class })}></div>
+  <div class={leftTop({ class: div3Class })}></div>
+  <div class={leftBot({ class: div4Class })}></div>
+  <div class={right({ class: div5Class })}></div>
+  <div class={slot({ class: div6Class })}>
+    {#if children}
+      {@render children()}
+    {/if}
   </div>
 </div>
 
@@ -26,15 +22,11 @@ export let classSlot = "";
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let div: $$Props['div'] = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]';
-@prop export let slot: $$Props['slot'] = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-@prop export let top: $$Props['top'] = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-@prop export let leftTop: $$Props['leftTop'] = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-@prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-@prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-@prop export let classTop: $$Props['classTop'] = '';
-@prop export let classLeftTop: $$Props['classLeftTop'] = '';
-@prop export let classLeftBot: $$Props['classLeftBot'] = '';
-@prop export let classRight: $$Props['classRight'] = '';
-@prop export let classSlot: $$Props['classSlot'] = '';
+@props: children: any;
+@props:divClass: any;
+@props:div2Class: any;
+@props:div3Class: any;
+@props:div4Class: any;
+@props:div5Class: any;
+@props:div6Class: any;
 -->