fix(Tags): add top-level disabled to CloseButton and input feild

Author: shinokada

src/lib/forms/tags/Tags.svelte

@@ -6,7 +6,7 @@
   import { computePosition, offset, flip, shift, autoUpdate } from "@floating-ui/dom";
   import { onDestroy } from "svelte";
 
-  let { value = $bindable([]), placeholder = "Enter tags", class: className, classes, itemClass, spanClass, closeClass, inputClass, closeBtnSize = "xs", unique = false, availableTags = [], showHelper = false, showAvailableTags = false, allowNewTags = true, inputProps = {}, ...restProps }: TagsProps = $props();
+  let { value = $bindable([]), placeholder = "Enter tags", class: className, classes, itemClass, spanClass, closeClass, inputClass, closeBtnSize = "xs", unique = false, availableTags = [], showHelper = false, showAvailableTags = false, allowNewTags = true, inputProps = {}, disabled, ...restProps }: TagsProps = $props();
 
   warnThemeDeprecation("Tags", { itemClass, spanClass, closeClass, inputClass }, { itemClass: "tag", spanClass: "span", closeClass: "close", inputClass: "input" });
   const styling = $derived(
@@ -158,11 +158,11 @@
       <span class={spanCls({ class: clsx(theme?.span, styling.span) })}>
         {tag}
       </span>
-      <CloseButton size={closeBtnSize} class={close({ class: clsx(theme?.close, styling.close) })} onclick={() => deleteField(index)} />
+      <CloseButton disabled size={closeBtnSize} class={close({ class: clsx(theme?.close, styling.close) })} onclick={() => deleteField(index)} />
     </div>
   {/each}
   <div class="relative w-full" bind:this={inputContainer}>
-    <input {...inputProps} bind:this={inputElement} onkeydown={handleKeys} oninput={handleInput} bind:value={contents} placeholder={value.length === 0 ? placeholder : ""} type="text" autocomplete="off" class={inputCls({ class: clsx(styling.input) })} />
+    <input {...inputProps} disabled bind:this={inputElement} onkeydown={handleKeys} oninput={handleInput} bind:value={contents} placeholder={value.length === 0 ? placeholder : ""} type="text" autocomplete="off" class={inputCls({ class: clsx(styling.input) })} />
     {#if availableTags.length > 0 && contents.trim() !== ""}
       {@const filteredSuggestions = availableTags.filter((tag) => tag.toLowerCase().includes(contents.trim().toLowerCase()) && (!unique || !value.some((t) => t.toLowerCase() === tag.toLowerCase())))}
       {#if filteredSuggestions.length > 0}

src/lib/types.ts

@@ -903,6 +903,7 @@ export interface TagsProps extends TagsVariants, HTMLAttributes<HTMLDivElement>
   showAvailableTags?: boolean;
   allowNewTags?: boolean;
   inputProps?: HTMLInputAttributes;
+  disabled?: boolean;
 }
 
 // Timepicker

src/lib/utils/theme.ts

@@ -5,7 +5,7 @@ import type { Classes } from "$lib/theme/themeUtils";
 export type CloseButtonVariants = VariantProps<typeof closeButton> & Classes<typeof closeButton>;
 
 export const closeButton = tv({
-  base: "focus:outline-hidden whitespace-normal",
+  base: "focus:outline-hidden whitespace-normal disabled:cursor-not-allowed disabled:opacity-50",
   variants: {
     // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
     color: {

src/routes/docs-examples/extend/tags/Disabled.svelte

@@ -1,15 +1,12 @@
 <script lang="ts">
   import { Button, Tags } from "flowbite-svelte";
-  let tags: string[] = $state([]);
+  let tags: string[] = $state(['foo', 'bar']);
   const handleClick = () => {
     alert(`Submitted: ${tags}`);
   };
 </script>
 
 <form>
-  <Tags inputProps={{ disabled: true }} class="mt-5 mb-3" bind:value={tags} />
-  {#if tags.length > 0}
-    <pre>{JSON.stringify(tags, null, 2)}</pre>
-  {/if}
+  <Tags disabled class="mt-5 mb-3" bind:value={tags} />
   <Button onclick={handleClick} disabled>Submit</Button>
 </form>

src/routes/docs/extend/tags.md

@@ -41,6 +41,8 @@ Import the `Tags` component in a script tag.
 
 ## Disabled
 
+Use `disabled` to the `Tags` component.
+
 ```svelte example class="h-40"
 {#include Disabled.svelte}
 ```