@pajohns/flowbite-svelte 0.1.0

package/dist/forms/tags/theme.js

@@ -0,0 +1,13 @@
+import { tv } from "tailwind-variants";
+export const tags = tv({
+    slots: {
+        base: "border border-gray-300 dark:border-gray-600 rounded-lg flex focus-within:ring-primary-500 focus-within:ring-1 focus-within:border-primary-500 scrollbar-hidden bg-gray-50 dark:bg-gray-700",
+        tag: "flex items-center rounded-lg bg-gray-100 text-gray-900 border border-gray-300 my-1 ml-1 px-2 text-sm max-w-full min-w-fit",
+        span: "items-center",
+        close: "my-auto ml-1",
+        input: "block text-sm m-2.5 p-0 bg-transparent border-none outline-none text-gray-900 h-min w-full min-w-fit focus:ring-0 placeholder-gray-400 dark:text-white disabled:cursor-not-allowed disabled:opacity-50",
+        info: "mt-1 text-sm text-blue-500 dark:text-blue-400",
+        warning: "mt-1 text-sm text-yellow-400 dark:text-yellow-300",
+        error: "mt-1 text-sm text-red-500 dark:text-red-400"
+    }
+});

package/dist/forms/textarea/Textarea.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import { textarea } from "./theme";
+  import clsx from "clsx";
+  import type { TextareaProps } from "../..";
+  import CloseButton from "../../utils/CloseButton.svelte";
+  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { createDismissableContext } from "../../utils/dismissable";
+  import { untrack } from "svelte";
+
+  let {
+    header,
+    footer,
+    addon,
+    value = $bindable(),
+    elementRef = $bindable(),
+    divClass,
+    innerClass,
+    headerClass,
+    footerClass,
+    addonClass,
+    disabled,
+    class: className,
+    classes,
+    clearable,
+    clearableSvgClass,
+    clearableColor = "none",
+    clearableClass,
+    clearableOnClick,
+    textareaClass,
+    ...restProps
+  }: TextareaProps = $props();
+
+  warnThemeDeprecation(
+    "Textarea",
+    untrack(() => ({ divClass, innerClass, headerClass, footerClass, addonClass, textareaClass, clearableClass, clearableSvgClass })),
+    { divClass: "div", innerClass: "inner", headerClass: "header", footerClass: "footer", addonClass: "addon", textareaClass: "class", clearableClass: "close", clearableSvgClass: "svg" }
+  );
+
+  const styling = $derived(
+    classes ?? {
+      div: divClass,
+      inner: innerClass,
+      header: headerClass,
+      footer: footerClass,
+      addon: addonClass,
+      textarea: textareaClass,
+      close: clearableClass,
+      svg: clearableSvgClass
+    }
+  );
+
+  const theme = $derived(getTheme("textarea"));
+
+  let hasHeader = $derived(!!header);
+  let hasFooter = $derived(!!footer);
+  let hasAddon = $derived(!!addon);
+  let wrapped: boolean = $derived(hasHeader || hasFooter || hasAddon);
+
+  const { div, base, wrapper, inner, header: headerCls, footer: footerCls, addon: addonCls, close } = $derived(textarea({ wrapped, hasHeader, hasFooter }));
+
+  const clearAll = () => {
+    if (elementRef) {
+      elementRef.value = "";
+      value = undefined;
+    }
+    if (clearableOnClick) clearableOnClick();
+  };
+
+  createDismissableContext(clearAll);
+</script>
+
+<div class={div({ class: clsx(theme?.div, styling.div) })}>
+  {#if !wrapped}
+    <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={wrapper({ class: clsx(className, classes?.wrapper) })}></textarea>
+  {:else}
+    <div class={wrapper({ class: clsx(theme?.wrapper, classes?.wrapper) })}>
+      {#if header}
+        <div class={headerCls({ class: clsx(theme?.header, styling.header) })}>
+          {@render header()}
+        </div>
+      {/if}
+      <div class={inner({ class: clsx(theme?.inner, styling.inner) })}>
+        {#if addon}
+          <div class={addonCls({ class: clsx(theme?.addon, styling.addon) })}>
+            {@render addon()}
+          </div>
+        {/if}
+        <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={base({ class: clsx(theme?.base, className) })}></textarea>
+      </div>
+      {#if footer}
+        <div class={footerCls({ class: clsx(theme?.footer, styling.footer) })}>
+          {@render footer()}
+        </div>
+      {/if}
+    </div>
+  {/if}
+  {#if value !== undefined && value !== "" && clearable}
+    <CloseButton class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} />
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1049)
+## Props
+@prop header
+@prop footer
+@prop addon
+@prop value = $bindable()
+@prop elementRef = $bindable()
+@prop divClass
+@prop innerClass
+@prop headerClass
+@prop footerClass
+@prop addonClass
+@prop disabled
+@prop class: className
+@prop classes
+@prop clearable
+@prop clearableSvgClass
+@prop clearableColor = "none"
+@prop clearableClass
+@prop clearableOnClick
+@prop textareaClass
+@prop ...restProps
+-->

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

@@ -0,0 +1,30 @@
+import type { TextareaProps } from "../..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1049)
+ * ## Props
+ * @prop header
+ * @prop footer
+ * @prop addon
+ * @prop value = $bindable()
+ * @prop elementRef = $bindable()
+ * @prop divClass
+ * @prop innerClass
+ * @prop headerClass
+ * @prop footerClass
+ * @prop addonClass
+ * @prop disabled
+ * @prop class: className
+ * @prop classes
+ * @prop clearable
+ * @prop clearableSvgClass
+ * @prop clearableColor = "none"
+ * @prop clearableClass
+ * @prop clearableOnClick
+ * @prop textareaClass
+ * @prop ...restProps
+ */
+declare const Textarea: import("svelte").Component<TextareaProps, {}, "value" | "elementRef">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

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

@@ -0,0 +1,2 @@
+export { default as Textarea } from "./Textarea.svelte";
+export { textarea } from "./theme";

package/dist/forms/textarea/index.js

@@ -0,0 +1,2 @@
+export { default as Textarea } from "./Textarea.svelte";
+export { textarea } from "./theme";

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

@@ -0,0 +1,100 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../../theme/themeUtils";
+export type TextareaVariants = VariantProps<typeof textarea> & Classes<typeof textarea>;
+export declare const textarea: import("tailwind-variants").TVReturnType<{
+    wrapped: {
+        false: {
+            wrapper: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            header: string;
+        };
+        false: {
+            inner: string;
+        };
+    };
+    hasFooter: {
+        true: {
+            footer: string;
+        };
+        false: {
+            inner: string;
+        };
+    };
+}, {
+    div: string;
+    base: string;
+    wrapper: string;
+    inner: string;
+    header: string;
+    footer: string;
+    addon: string;
+    close: string;
+    svg: string;
+}, undefined, {
+    wrapped: {
+        false: {
+            wrapper: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            header: string;
+        };
+        false: {
+            inner: string;
+        };
+    };
+    hasFooter: {
+        true: {
+            footer: string;
+        };
+        false: {
+            inner: string;
+        };
+    };
+}, {
+    div: string;
+    base: string;
+    wrapper: string;
+    inner: string;
+    header: string;
+    footer: string;
+    addon: string;
+    close: string;
+    svg: string;
+}, import("tailwind-variants").TVReturnType<{
+    wrapped: {
+        false: {
+            wrapper: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            header: string;
+        };
+        false: {
+            inner: string;
+        };
+    };
+    hasFooter: {
+        true: {
+            footer: string;
+        };
+        false: {
+            inner: string;
+        };
+    };
+}, {
+    div: string;
+    base: string;
+    wrapper: string;
+    inner: string;
+    header: string;
+    footer: string;
+    addon: string;
+    close: string;
+    svg: 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: {
+        div: "relative",
+        base: "block w-full 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 disabled:cursor-not-allowed disabled:opacity-50",
+        inner: "py-2 px-4 bg-white dark:bg-gray-800",
+        header: "py-2 px-3 border-gray-200 dark:border-gray-500",
+        footer: "py-2 px-3 border-gray-200 dark:border-gray-500",
+        addon: "absolute top-2 right-2 z-10",
+        close: "absolute right-2 top-5 -translate-y-1/2 text-gray-400 hover:text-black",
+        svg: ""
+    },
+    variants: {
+        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: {
+                header: "border-b"
+            },
+            false: {
+                inner: "rounded-t-lg"
+            }
+        },
+        hasFooter: {
+            true: {
+                footer: "border-t"
+            },
+            false: {
+                inner: "rounded-b-lg"
+            }
+        }
+    }
+});