flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/forms/select/type.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from "svelte";
+import type { HTMLSelectAttributes } from "svelte/elements";
+import type { MultiSelectVariants, SelectVariants } from "./theme";
+type SelectOptionType<T> = {
+    name: string | number;
+    value: T;
+    disabled?: boolean;
+};
+interface SelectProps<T> extends SelectVariants, Omit<HTMLSelectAttributes, "size"> {
+    children?: Snippet;
+    items?: SelectOptionType<T>[];
+    placeholder?: string;
+}
+interface MultiSelectProps<T> extends MultiSelectVariants, Omit<HTMLSelectAttributes, "size" | "children"> {
+    children?: Snippet<[{
+        item: SelectOptionType<T>;
+        clear: () => void;
+    }]>;
+    items?: SelectOptionType<T>[];
+    dropdownClass?: string;
+    placeholder?: string;
+    disabled?: boolean;
+}
+export { type SelectProps, type SelectOptionType, type MultiSelectProps };

package/dist/forms/select/type.js

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

package/dist/forms/textarea/Textarea.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { type TextareaProps as Props, textarea } from ".";
+
+  let { header, footer, value = $bindable(), innerClass, headerClass, footerClass, disabled, class: className, cols, ...restProps }: Props = $props();
+
+  let hasHeader = $derived(!!header);
+  let hasFooter = $derived(!!footer);
+  let wrapped: boolean = $derived(hasHeader || hasFooter);
+
+  const { base, wrapper, innerWrapper, headerCls, footerCls } = $derived(textarea({ wrapped, hasHeader, hasFooter, cols: !!cols }));
+  // $inspect('wrapped: ', wrapped);
+</script>
+
+{#if !wrapped}
+  <textarea bind:value {disabled} {...restProps} class={wrapper({ class: clsx(className) })}></textarea>
+{:else}
+  <div class={wrapper({ class: clsx(className) })}>
+    {#if header}
+      <div class={headerCls({ class: headerClass })}>
+        {@render header()}
+      </div>
+    {/if}
+    <div class={innerWrapper({ class: innerClass })}>
+      <textarea bind:value {disabled} {...restProps} class={base()}></textarea>
+    </div>
+    {#if footer}
+      <div class={footerCls({ class: footerClass })}>
+        {@render footer()}
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: header: any;
+@props:footer: any;
+@props:value: any = $bindable();
+@props:innerClass: any;
+@props:headerClass: any;
+@props:footerClass: any;
+@props:disabled: any;
+@props:class: string;
+@props:cols: any;
+-->

package/dist/forms/textarea/Textarea.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type TextareaProps_ = typeof __propDef.props;
+export { TextareaProps_ as TextareaProps };
+export type TextareaEvents = typeof __propDef.events;
+export type TextareaSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: header: any;
+ * @props:footer: any;
+ * @props:value: any = $bindable();
+ * @props:innerClass: any;
+ * @props:headerClass: any;
+ * @props:footerClass: any;
+ * @props:disabled: any;
+ * @props:class: string;
+ * @props:cols: any;
+ */
+export default class Textarea extends SvelteComponentTyped<TextareaProps_, TextareaEvents, TextareaSlots> {
+}

package/dist/forms/textarea/index.d.ts

@@ -0,0 +1,4 @@
+import type { TextareaProps } from "./type";
+import Textarea from "./Textarea.svelte";
+import { textarea } from "./theme";
+export { Textarea, type TextareaProps, textarea };

package/dist/forms/textarea/index.js

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

package/dist/forms/textarea/theme.d.ts

@@ -0,0 +1,105 @@
+import { type VariantProps } from "tailwind-variants";
+export type TextareaVariants = VariantProps<typeof textarea>;
+export declare const textarea: import("tailwind-variants").TVReturnType<{
+    cols: {
+        false: {
+            base: string;
+            wrapper: string;
+        };
+    };
+    wrapped: {
+        false: {
+            wrapper: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            headerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+    hasFooter: {
+        true: {
+            footerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    innerWrapper: string;
+    headerCls: string;
+    footerCls: string;
+}, undefined, {
+    cols: {
+        false: {
+            base: string;
+            wrapper: string;
+        };
+    };
+    wrapped: {
+        false: {
+            wrapper: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            headerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+    hasFooter: {
+        true: {
+            footerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    innerWrapper: string;
+    headerCls: string;
+    footerCls: string;
+}, import("tailwind-variants").TVReturnType<{
+    cols: {
+        false: {
+            base: string;
+            wrapper: string;
+        };
+    };
+    wrapped: {
+        false: {
+            wrapper: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            headerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+    hasFooter: {
+        true: {
+            footerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    innerWrapper: string;
+    headerCls: string;
+    footerCls: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/forms/textarea/theme.js

@@ -0,0 +1,37 @@
+import { tv } from "tailwind-variants";
+export const textarea = tv({
+    slots: {
+        base: "block text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-hidden focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
+        wrapper: "text-sm rounded-lg bg-gray-50 dark:bg-gray-600 text-gray-900 dark:placeholder-gray-400 dark:text-white border border-gray-200 dark:border-gray-500",
+        innerWrapper: "py-2 px-4 bg-white dark:bg-gray-800",
+        headerCls: "py-2 px-3 border-gray-200 dark:border-gray-500",
+        footerCls: "py-2 px-3 border-gray-200 dark:border-gray-500"
+    },
+    variants: {
+        cols: {
+            false: {
+                base: "w-full",
+                wrapper: "w-full"
+            }
+        },
+        wrapped: {
+            false: { wrapper: "p-2.5 text-sm focus:outline-hidden focus:ring-primary-500 border-gray-300 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-50" }
+        },
+        hasHeader: {
+            true: {
+                headerCls: "border-b"
+            },
+            false: {
+                innerWrapper: "rounded-t-lg"
+            }
+        },
+        hasFooter: {
+            true: {
+                footerCls: "border-t"
+            },
+            false: {
+                innerWrapper: "rounded-b-lg"
+            }
+        }
+    }
+});

package/dist/forms/textarea/type.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+import type { HTMLTextareaAttributes } from "svelte/elements";
+interface TextareaProps extends HTMLTextareaAttributes {
+    header?: Snippet;
+    footer?: Snippet;
+    value?: string;
+    wrapped?: boolean;
+    divClass?: string | null;
+    innerClass?: string;
+    headerClass?: string;
+    footerClass?: string;
+    cols?: number;
+}
+export { type TextareaProps };

package/dist/forms/textarea/type.js

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

package/dist/forms/toggle/Toggle.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { Label } from "../label";
+  import { type ToggleProps as Props, toggle } from "./index";
+
+  let { children, size = "default", value, checked = $bindable(), disabled, color = "primary", class: className, inputClass, spanClass, offLabel, ...restProps }: Props = $props();
+
+  const { input, label, span } = $derived(toggle({ color, checked, size, disabled, _offLabel: !!offLabel }));
+</script>
+
+<Label class={label({ class: clsx(className) })}>
+  {#if offLabel}
+    {@render offLabel()}
+  {/if}
+  <input type="checkbox" bind:checked {value} {...restProps} {disabled} class={input({ class: inputClass })} />
+  <span class={span({ class: spanClass })}></span>
+  {#if children}
+    {@render children()}
+  {/if}
+</Label>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: children: any;
+@props:size: any = "default";
+@props:value: any;
+@props:checked: any = $bindable();
+@props:disabled: any;
+@props:color: any = "primary";
+@props:class: string;
+@props:inputClass: any;
+@props:spanClass: any;
+@props:offLabel: any;
+-->

package/dist/forms/toggle/Toggle.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type ToggleProps_ = typeof __propDef.props;
+export { ToggleProps_ as ToggleProps };
+export type ToggleEvents = typeof __propDef.events;
+export type ToggleSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:size: any = "default";
+ * @props:value: any;
+ * @props:checked: any = $bindable();
+ * @props:disabled: any;
+ * @props:color: any = "primary";
+ * @props:class: string;
+ * @props:inputClass: any;
+ * @props:spanClass: any;
+ * @props:offLabel: any;
+ */
+export default class Toggle extends SvelteComponentTyped<ToggleProps_, ToggleEvents, ToggleSlots> {
+}

package/dist/forms/toggle/index.d.ts

@@ -0,0 +1,4 @@
+import type { ToggleProps, ToggleColor } from "./type";
+import Toggle from "./Toggle.svelte";
+import { toggle } from "./theme";
+export { Toggle, toggle, type ToggleProps, type ToggleColor };

package/dist/forms/toggle/index.js

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

package/dist/forms/toggle/theme.d.ts

@@ -0,0 +1,279 @@
+import { type VariantProps } from "tailwind-variants";
+export type ToggleVariants = VariantProps<typeof toggle>;
+export declare const toggle: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            label: string;
+        };
+    };
+    checked: {
+        true: string;
+        false: string;
+    };
+    _offLabel: {
+        true: {
+            span: string;
+        };
+    };
+    color: {
+        primary: {
+            span: string;
+        };
+        secondary: {
+            span: string;
+        };
+        gray: {
+            span: string;
+        };
+        red: {
+            span: string;
+        };
+        orange: {
+            span: string;
+        };
+        amber: {
+            span: string;
+        };
+        yellow: {
+            span: string;
+        };
+        lime: {
+            span: string;
+        };
+        green: {
+            span: string;
+        };
+        emerald: {
+            span: string;
+        };
+        teal: {
+            span: string;
+        };
+        cyan: {
+            span: string;
+        };
+        sky: {
+            span: string;
+        };
+        blue: {
+            span: string;
+        };
+        indigo: {
+            span: string;
+        };
+        violet: {
+            span: string;
+        };
+        purple: {
+            span: string;
+        };
+        fuchsia: {
+            span: string;
+        };
+        pink: {
+            span: string;
+        };
+        rose: {
+            span: string;
+        };
+    };
+    size: {
+        small: {
+            span: string;
+        };
+        default: {
+            span: string;
+        };
+        large: {
+            span: string;
+        };
+    };
+}, {
+    span: string;
+    label: string;
+    input: string;
+}, undefined, {
+    disabled: {
+        true: {
+            label: string;
+        };
+    };
+    checked: {
+        true: string;
+        false: string;
+    };
+    _offLabel: {
+        true: {
+            span: string;
+        };
+    };
+    color: {
+        primary: {
+            span: string;
+        };
+        secondary: {
+            span: string;
+        };
+        gray: {
+            span: string;
+        };
+        red: {
+            span: string;
+        };
+        orange: {
+            span: string;
+        };
+        amber: {
+            span: string;
+        };
+        yellow: {
+            span: string;
+        };
+        lime: {
+            span: string;
+        };
+        green: {
+            span: string;
+        };
+        emerald: {
+            span: string;
+        };
+        teal: {
+            span: string;
+        };
+        cyan: {
+            span: string;
+        };
+        sky: {
+            span: string;
+        };
+        blue: {
+            span: string;
+        };
+        indigo: {
+            span: string;
+        };
+        violet: {
+            span: string;
+        };
+        purple: {
+            span: string;
+        };
+        fuchsia: {
+            span: string;
+        };
+        pink: {
+            span: string;
+        };
+        rose: {
+            span: string;
+        };
+    };
+    size: {
+        small: {
+            span: string;
+        };
+        default: {
+            span: string;
+        };
+        large: {
+            span: string;
+        };
+    };
+}, {
+    span: string;
+    label: string;
+    input: string;
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            label: string;
+        };
+    };
+    checked: {
+        true: string;
+        false: string;
+    };
+    _offLabel: {
+        true: {
+            span: string;
+        };
+    };
+    color: {
+        primary: {
+            span: string;
+        };
+        secondary: {
+            span: string;
+        };
+        gray: {
+            span: string;
+        };
+        red: {
+            span: string;
+        };
+        orange: {
+            span: string;
+        };
+        amber: {
+            span: string;
+        };
+        yellow: {
+            span: string;
+        };
+        lime: {
+            span: string;
+        };
+        green: {
+            span: string;
+        };
+        emerald: {
+            span: string;
+        };
+        teal: {
+            span: string;
+        };
+        cyan: {
+            span: string;
+        };
+        sky: {
+            span: string;
+        };
+        blue: {
+            span: string;
+        };
+        indigo: {
+            span: string;
+        };
+        violet: {
+            span: string;
+        };
+        purple: {
+            span: string;
+        };
+        fuchsia: {
+            span: string;
+        };
+        pink: {
+            span: string;
+        };
+        rose: {
+            span: string;
+        };
+    };
+    size: {
+        small: {
+            span: string;
+        };
+        default: {
+            span: string;
+        };
+        large: {
+            span: string;
+        };
+    };
+}, {
+    span: string;
+    label: string;
+    input: string;
+}, undefined, unknown, unknown, undefined>>;