flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/forms/Checkbox.svelte

@@ -1,44 +0,0 @@
-<script>import { getContext } from "svelte";
-import { labelClass, inputClass } from "./Radio.svelte";
-import Label from "./Label.svelte";
-export let color = "primary";
-export let custom = false;
-export let inline = false;
-export let group = [];
-export let choices = [];
-export let value = "on";
-export let checked = void 0;
-export let spacing = $$slots.default ? "me-2" : "";
-export let groupLabelClass = "";
-export let groupInputClass = "";
-let background = getContext("background");
-</script>
-{#if choices.length > 0}
-  {#each choices as {value, label}, i}
-    <Label class={labelClass(inline, groupLabelClass)} show={$$slots.default} for={`checkbox-${i}`}>{ label }
-      <input id={`checkbox-${i}`} type="checkbox" value={ value } bind:group {...$$restProps}  class={inputClass(custom, color, true, background, spacing, groupInputClass)} />
-      <slot />
-    </Label>
-  {/each}
-{:else}
-<Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
-  <input type="checkbox" bind:checked on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste on:change {value} {...$$restProps} class={inputClass(custom, color, true, background, spacing, $$slots.default || $$props.class)} />
-  <slot />
-</Label>
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let color: NonNullable<$$Props['color']> = 'primary';
-@prop export let custom: NonNullable<$$Props['custom']> = false;
-@prop export let inline: NonNullable<$$Props['inline']> = false;
-@prop export let group: $$Props['group'] = [];
-@prop export let choices: NonNullable<$$Props['choices']> = [];
-@prop export let value: $$Props['value'] = 'on';
-@prop export let checked: $$Props['checked'] = undefined;
-@prop export let spacing: NonNullable<$$Props['spacing']> = $$slots.default ? 'me-2' : '';
-@prop export let groupLabelClass: NonNullable<$$Props['groupLabelClass']> = '';
-@prop export let groupInputClass: NonNullable<$$Props['groupInputClass']> = '';
--->

package/dist/forms/Checkbox.svelte.d.ts

@@ -1,58 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLInputAttributes } from 'svelte/elements';
-import type { FormColorType } from '../types';
-import type { CheckboxItem } from '../types';
-declare const __propDef: {
-    props: HTMLInputAttributes & {
-        color?: FormColorType;
-        custom?: boolean;
-        inline?: boolean;
-        group?: string[];
-        choices?: CheckboxItem[];
-        value?: string | number;
-        checked?: boolean;
-        spacing?: string;
-        groupLabelClass?: string;
-        groupInputClass?: string;
-        class?: string;
-        required?: boolean;
-    };
-    events: {
-        keyup: KeyboardEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
-        click: MouseEvent;
-        mouseover: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        paste: ClipboardEvent;
-        change: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type CheckboxProps = typeof __propDef.props;
-export type CheckboxEvents = typeof __propDef.events;
-export type CheckboxSlots = typeof __propDef.slots;
-/**
- * [Go to docs](https://flowbite-svelte.com/)
- * ## Props
- * @prop export let color: NonNullable<$$Props['color']> = 'primary';
- * @prop export let custom: NonNullable<$$Props['custom']> = false;
- * @prop export let inline: NonNullable<$$Props['inline']> = false;
- * @prop export let group: $$Props['group'] = [];
- * @prop export let choices: NonNullable<$$Props['choices']> = [];
- * @prop export let value: $$Props['value'] = 'on';
- * @prop export let checked: $$Props['checked'] = undefined;
- * @prop export let spacing: NonNullable<$$Props['spacing']> = $$slots.default ? 'me-2' : '';
- * @prop export let groupLabelClass: NonNullable<$$Props['groupLabelClass']> = '';
- * @prop export let groupInputClass: NonNullable<$$Props['groupInputClass']> = '';
- */
-export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
-}
-export {};

package/dist/forms/CheckboxButton.svelte

@@ -1,78 +0,0 @@
-<script>import Button from "../buttons/Button.svelte";
-import { twMerge } from "tailwind-merge";
-export let group = [];
-export let value = "on";
-export let checked = void 0;
-export let inline = true;
-export let pill = false;
-export let outline = false;
-export let size = void 0;
-export let color = void 0;
-export let shadow = false;
-function init(node, _group) {
-  function update(_group2) {
-    if (_group2 && value !== void 0) {
-      checked = _group2.includes(value);
-    }
-  }
-  update(_group);
-  return { update };
-}
-function onChange() {
-  if (group && value !== void 0) {
-    const index = group.indexOf(value);
-    if (checked === void 0) checked = index >= 0;
-    if (checked) {
-      if (index < 0) {
-        group.push(value);
-        group = group;
-      }
-    } else {
-      if (index >= 0) {
-        group.splice(index, 1);
-        group = group;
-      }
-    }
-  }
-}
-let buttonClass;
-$: buttonClass = twMerge(inline ? "inline-flex" : "flex", $$props.class);
-</script>
-
-<Button {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
-  <input
-    use:init={group}
-    type="checkbox"
-    bind:checked
-    value={value !== undefined ? value : 'on'}
-    {...$$restProps}
-    class="sr-only"
-    on:keyup
-    on:keydown
-    on:keypress
-    on:focus
-    on:blur
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    on:paste
-    on:change={onChange}
-    on:change />
-  <slot />
-</Button>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let group: $$Props['group'] = [];
-@prop export let value: $$Props['value'] = 'on';
-@prop export let checked: $$Props['checked'] = undefined;
-@prop export let inline: $$Props['inline'] = true;
-@prop export let pill: $$Props['pill'] = false;
-@prop export let outline: $$Props['outline'] = false;
-@prop export let size: $$Props['size'] = undefined;
-@prop export let color: $$Props['color'] = undefined;
-@prop export let shadow: $$Props['shadow'] = false;
--->

package/dist/forms/CheckboxButton.svelte.d.ts

@@ -1,73 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { ButtonColorType, SizeType } from '../types';
-declare const __propDef: {
-    props: (({
-        pill?: boolean;
-        outline?: boolean;
-        size?: "xs" | "sm" | "md" | "lg" | "xl";
-        color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
-        shadow?: boolean;
-        tag?: "a" | "button";
-        checked?: boolean;
-    } & Omit<import("svelte/elements").HTMLAnchorAttributes, "type"> & {
-        href?: string | undefined;
-    }) | ({
-        pill?: boolean;
-        outline?: boolean;
-        size?: "xs" | "sm" | "md" | "lg" | "xl";
-        color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
-        shadow?: boolean;
-        tag?: "a" | "button";
-        checked?: boolean;
-    } & import("svelte/elements").HTMLButtonAttributes & {
-        disabled?: import("svelte/elements").HTMLButtonAttributes["disabled"];
-        type?: import("svelte/elements").HTMLButtonAttributes["type"];
-    })) & {
-        group?: (string | number)[];
-        value?: string | number;
-        checked?: boolean;
-        inline?: boolean;
-        pill?: boolean;
-        outline?: boolean;
-        size?: SizeType;
-        color?: ButtonColorType;
-        shadow?: boolean;
-    };
-    events: {
-        keyup: KeyboardEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
-        click: MouseEvent;
-        mouseover: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        paste: ClipboardEvent;
-        change: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type CheckboxButtonProps = typeof __propDef.props;
-export type CheckboxButtonEvents = typeof __propDef.events;
-export type CheckboxButtonSlots = typeof __propDef.slots;
-/**
- * [Go to docs](https://flowbite-svelte.com/)
- * ## Props
- * @prop export let group: $$Props['group'] = [];
- * @prop export let value: $$Props['value'] = 'on';
- * @prop export let checked: $$Props['checked'] = undefined;
- * @prop export let inline: $$Props['inline'] = true;
- * @prop export let pill: $$Props['pill'] = false;
- * @prop export let outline: $$Props['outline'] = false;
- * @prop export let size: $$Props['size'] = undefined;
- * @prop export let color: $$Props['color'] = undefined;
- * @prop export let shadow: $$Props['shadow'] = false;
- */
-export default class CheckboxButton extends SvelteComponentTyped<CheckboxButtonProps, CheckboxButtonEvents, CheckboxButtonSlots> {
-}
-export {};

package/dist/forms/Dropzone.svelte

@@ -1,32 +0,0 @@
-<script>import { twMerge } from "tailwind-merge";
-export let value = "";
-export let files = void 0;
-export let defaultClass = "flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600";
-let input;
-function keydown(ev) {
-  if ([" ", "Enter"].includes(ev.key)) {
-    ev.preventDefault();
-    input.click();
-  }
-}
-function onClick(event) {
-  event.preventDefault();
-  input.click();
-}
-</script>
-
-<button class={twMerge(defaultClass, $$props.class)} on:keydown={keydown} on:click={onClick} on:focus on:blur on:mouseenter on:mouseleave on:mouseover on:dragenter on:dragleave on:dragover on:drop type="button">
-  <slot />
-</button>
-<label class="hidden">
-  <input {...$$restProps} bind:value bind:files bind:this={input} on:change on:click type="file" />
-</label>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let value: $$Props['value'] = '';
-@prop export let files: $$Props['files'] = undefined;
-@prop export let defaultClass: $$Props['defaultClass'] = 'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600';
--->

package/dist/forms/Dropzone.svelte.d.ts

@@ -1,40 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLInputAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: {
-        value?: string;
-        files?: FileList | undefined;
-        defaultClass?: string;
-    } & HTMLInputAttributes;
-    events: {
-        focus: FocusEvent;
-        blur: FocusEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mouseover: MouseEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        drop: DragEvent;
-        change: Event;
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-type DropzoneProps_ = typeof __propDef.props;
-export { DropzoneProps_ as DropzoneProps };
-export type DropzoneEvents = typeof __propDef.events;
-export type DropzoneSlots = typeof __propDef.slots;
-/**
- * [Go to docs](https://flowbite-svelte.com/)
- * ## Props
- * @prop export let value: $$Props['value'] = '';
- * @prop export let files: $$Props['files'] = undefined;
- * @prop export let defaultClass: $$Props['defaultClass'] = 'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600';
- */
-export default class Dropzone extends SvelteComponentTyped<DropzoneProps_, DropzoneEvents, DropzoneSlots> {
-}

package/dist/forms/Fileupload.svelte

@@ -1,17 +0,0 @@
-<script>import { twMerge } from "tailwind-merge";
-import Input from "./Input.svelte";
-export let files = void 0;
-export let inputClass = "border !p-0 dark:text-gray-400";
-</script>
-
-<Input {...$$restProps} class={twMerge(inputClass, $$props.class)} let:props>
-  <input type="file" on:change on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste bind:files {...props} />
-</Input>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let files: $$Props['files'] = undefined;
-@prop export let inputClass: $$Props['inputClass'] = 'border !p-0 dark:text-gray-400';
--->

package/dist/forms/Fileupload.svelte.d.ts

@@ -1,45 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Omit<import("svelte/elements").HTMLInputAttributes, "size"> & {
-        type?: import("..").InputType;
-        value?: any;
-        size?: import("..").FormSizeType;
-        clearable?: boolean;
-        defaultClass?: string;
-        color?: "base" | "green" | "red";
-        floatClass?: string;
-        classLeft?: string;
-        classRight?: string;
-    } & {
-        files?: FileList | undefined;
-        inputClass?: string;
-    };
-    events: {
-        change: Event;
-        keyup: KeyboardEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
-        click: MouseEvent;
-        mouseover: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        paste: ClipboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FileuploadProps = typeof __propDef.props;
-export type FileuploadEvents = typeof __propDef.events;
-export type FileuploadSlots = typeof __propDef.slots;
-/**
- * [Go to docs](https://flowbite-svelte.com/)
- * ## Props
- * @prop export let files: $$Props['files'] = undefined;
- * @prop export let inputClass: $$Props['inputClass'] = 'border !p-0 dark:text-gray-400';
- */
-export default class Fileupload extends SvelteComponentTyped<FileuploadProps, FileuploadEvents, FileuploadSlots> {
-}
-export {};

package/dist/forms/FloatingLabelInput.svelte

@@ -1,88 +0,0 @@
-<script>import { twMerge } from "tailwind-merge";
-import generateId from "../utils/generateId.js";
-export let id = generateId();
-export let style = "standard";
-export let type = "text";
-export let size = "default";
-export let color = "base";
-export let value = void 0;
-export let classDiv = "";
-export let classInput = "";
-export let classLabel = "";
-const divClasses = {
-  filled: "relative",
-  outlined: "relative",
-  standard: "relative z-0"
-};
-const inputSizes = {
-  filled: {
-    small: "px-2.5 pb-1.5 pt-4",
-    default: "px-2.5 pb-2.5 pt-5"
-  },
-  outlined: {
-    small: "px-2.5 pb-1.5 pt-3",
-    default: "px-2.5 pb-2.5 pt-4"
-  },
-  standard: {
-    small: "py-2 px-0",
-    default: "py-2.5 px-0"
-  }
-};
-const labelSizes = {
-  filled: {
-    small: "top-3",
-    default: "top-4"
-  },
-  outlined: {
-    small: "top-1",
-    default: "top-2"
-  },
-  standard: {
-    small: "top-3",
-    default: "top-3"
-  }
-};
-const inputClasses = {
-  filled: "block rounded-t-lg w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 appearance-none dark:text-white focus:outline-none focus:ring-0 peer",
-  outlined: "block w-full text-sm text-gray-900 bg-transparent rounded-lg border appearance-none dark:text-white  focus:outline-none focus:ring-0 peer",
-  standard: "block w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 appearance-none dark:text-white  focus:outline-none focus:ring-0 peer"
-};
-const labelClasses = {
-  filled: "absolute text-sm duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-left rtl:origin-right start-2.5  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4",
-  outlined: "absolute text-sm duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-left rtl:origin-right bg-white dark:bg-gray-900 px-2 peer-focus:px-2  peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 start-1",
-  standard: "absolute text-sm duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-left rtl:origin-right peer-focus:start-0  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
-};
-const inputColorClasses = {
-  base: "border-gray-300 dark:border-gray-600 dark:focus:border-primary-500 focus:border-primary-600",
-  green: "border-green-600 dark:border-green-500 dark:focus:border-green-500 focus:border-green-600",
-  red: "border-red-600 dark:border-red-500 dark:focus:border-red-500  focus:border-red-600"
-};
-const labelColorClasses = {
-  base: "text-gray-500 dark:text-gray-400 peer-focus:text-primary-600 peer-focus:dark:text-primary-500",
-  green: "text-green-600 dark:text-green-500",
-  red: "text-red-600 dark:text-red-500"
-};
-</script>
-
-<div class={twMerge(divClasses[style], classDiv)}>
-  <input {id} {...$$restProps} bind:value on:blur on:change on:click on:focus on:input on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {...{ type }} placeholder=" " class={twMerge(inputClasses[style], inputColorClasses[color], inputSizes[style][size], classInput)} />
-
-  <label for={id} class={twMerge(labelClasses[style], labelColorClasses[color], labelSizes[style][size], classLabel)}>
-    <slot />
-  </label>
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let id: $$Props['id'] = generateId();
-@prop export let style: NonNullable<$$Props['style']> = 'standard';
-@prop export let type: NonNullable<$$Props['type']> = 'text';
-@prop export let size: NonNullable<$$Props['size']> = 'default';
-@prop export let color: NonNullable<$$Props['color']> = 'base';
-@prop export let value: $$Props['value'] = undefined;
-@prop export let classDiv: $$Props['classDiv'] = '';
-@prop export let classInput: $$Props['classInput'] = '';
-@prop export let classLabel: $$Props['classLabel'] = '';
--->

package/dist/forms/FloatingLabelInput.svelte.d.ts

@@ -1,54 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLInputAttributes } from 'svelte/elements';
-import type { InputType } from '../types';
-declare const __propDef: {
-    props: Omit<HTMLInputAttributes, "size"> & {
-        id?: string;
-        style?: "filled" | "outlined" | "standard";
-        type?: InputType;
-        size?: "small" | "default";
-        color?: "base" | "green" | "red";
-        value?: any;
-        classDiv?: string;
-        classInput?: string;
-        classLabel?: string;
-    };
-    events: {
-        blur: FocusEvent;
-        change: Event;
-        click: MouseEvent;
-        focus: FocusEvent;
-        input: Event;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mouseover: MouseEvent;
-        paste: ClipboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type FloatingLabelInputProps = typeof __propDef.props;
-export type FloatingLabelInputEvents = typeof __propDef.events;
-export type FloatingLabelInputSlots = typeof __propDef.slots;
-/**
- * [Go to docs](https://flowbite-svelte.com/)
- * ## Props
- * @prop export let id: $$Props['id'] = generateId();
- * @prop export let style: NonNullable<$$Props['style']> = 'standard';
- * @prop export let type: NonNullable<$$Props['type']> = 'text';
- * @prop export let size: NonNullable<$$Props['size']> = 'default';
- * @prop export let color: NonNullable<$$Props['color']> = 'base';
- * @prop export let value: $$Props['value'] = undefined;
- * @prop export let classDiv: $$Props['classDiv'] = '';
- * @prop export let classInput: $$Props['classInput'] = '';
- * @prop export let classLabel: $$Props['classLabel'] = '';
- */
-export default class FloatingLabelInput extends SvelteComponentTyped<FloatingLabelInputProps, FloatingLabelInputEvents, FloatingLabelInputSlots> {
-}
-export {};

package/dist/forms/Helper.svelte

@@ -1,22 +0,0 @@
-<script>import { twMerge } from "tailwind-merge";
-export let helperClass = "text-xs font-normal text-gray-500 dark:text-gray-300";
-export let color = "gray";
-const colorClasses = {
-  gray: "text-gray-900 dark:text-gray-300",
-  green: "text-green-700 dark:text-green-500",
-  red: "text-red-700 dark:text-red-500",
-  disabled: "text-gray-400 dark:text-gray-500 grayscale contrast-50"
-};
-</script>
-
-<p {...$$restProps} class={twMerge(helperClass, colorClasses[color], $$props.class)}>
-  <slot />
-</p>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let helperClass: $$Props['helperClass'] = 'text-xs font-normal text-gray-500 dark:text-gray-300';
-@prop export let color: NonNullable<$$Props['color']> = 'gray';
--->

package/dist/forms/Helper.svelte.d.ts

@@ -1,26 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: HTMLAttributes<HTMLParagraphElement> & {
-        helperClass?: string;
-        color?: "gray" | "green" | "red" | "disabled";
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type HelperProps = typeof __propDef.props;
-export type HelperEvents = typeof __propDef.events;
-export type HelperSlots = typeof __propDef.slots;
-/**
- * [Go to docs](https://flowbite-svelte.com/)
- * ## Props
- * @prop export let helperClass: $$Props['helperClass'] = 'text-xs font-normal text-gray-500 dark:text-gray-300';
- * @prop export let color: NonNullable<$$Props['color']> = 'gray';
- */
-export default class Helper extends SvelteComponentTyped<HelperProps, HelperEvents, HelperSlots> {
-}
-export {};