fix: add disabled to number-input, search-input, textarea, and timepicker

Author: shinokada

src/lib/forms/phoneinput/theme.ts

@@ -7,9 +7,9 @@ export const phoneInput = tv({
   slots: {
     div: "absolute inset-y-0 start-0 top-0 flex items-center ps-3.5 pointer-events-none",
     svg: "w-4 h-4 text-gray-500 dark:text-gray-400",
-    input: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",
+    input: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-50",
     span: "absolute start-0 bottom-3 text-gray-500 dark:text-gray-400",
-    floatingInput: "block py-2.5 ps-6 pe-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-primary-500 focus:outline-none focus:ring-0 focus:border-primary-600 peer",
+    floatingInput: "block py-2.5 ps-6 pe-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-primary-500 focus:outline-none focus:ring-0 focus:border-primary-600 peer disabled:cursor-not-allowed disabled:opacity-50",
     label: "absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-placeholder-shown:start-6 peer-focus:start-0 peer-focus:text-primary-600 peer-focus:dark:text-primary-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto"
   },
   variants: {

src/lib/forms/search/theme.ts

@@ -10,7 +10,7 @@ export const search = tv({
     left: "absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none",
     icon: "text-gray-500 dark:text-gray-400",
     content: "absolute inset-y-0 end-0 flex items-center text-gray-500 dark:text-gray-400",
-    input: "block w-full text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",
+    input: "block w-full text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-50",
     close: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black",
     svg: ""
   },

src/lib/forms/textarea/theme.ts

@@ -7,7 +7,7 @@ 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",
+    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",

src/routes/docs-examples/forms/number-input/Disabled.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { PhoneInput, Input } from "flowbite-svelte";
+</script>
+
+<form class="mx-auto max-w-sm space-y-2">
+  <Input disabled type="number" id="number-input" aria-describedby="helper-text-explanation" placeholder="90210" required />
+
+  <PhoneInput classes={{input:"rounded-lg"}} placeholder="123-456-7890" disabled phoneType="countryCode" />
+</form>

src/routes/docs-examples/forms/search-input/Disabled.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Search, Button } from "flowbite-svelte";
+</script>
+
+<Search disabled>
+  <Button disabled class="me-1">Search</Button>
+</Search>

src/routes/docs-examples/forms/textarea/Disabled.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Textarea } from "flowbite-svelte";
+</script>
+
+<Textarea disabled id="textarea-id" placeholder="Your message" rows={4} name="message" class="w-full" />

src/routes/docs-examples/forms/timepicker/Disabled.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Timepicker } from "flowbite-svelte";
+</script>
+
+<Timepicker disabled />

src/routes/docs/forms/number-input.md

@@ -24,6 +24,12 @@ Use this component to set a number value inside a form field by applying the typ
 {#include Default.svelte}
 ```
 
+## Disabled
+
+```svelte example
+{#include Disabled.svelte}
+```
+
 ## ZIP code input
 
 Use this example with an icon and helper text to set a ZIP code value inside a form field by also applying the pattern attribute to validate the input using a regular expression for a 5 digit number.

src/routes/docs/forms/search-input.md

@@ -31,6 +31,12 @@ You will also find more advanced search components on this page including dropdo
 {#include Default.svelte}
 ```
 
+## Disabled
+
+```svelte example class="flex flex-col gap-4"
+{#include Disabled.svelte}
+```
+
 ## Search input with clearable
 
 Use the simplest form of a search input component with an icon and a search button next to the text field.

src/routes/docs/forms/textarea.md

@@ -31,6 +31,14 @@ Get started with the default example of a textarea component below.
 {#include Default.svelte}
 ```
 
+## Disabled
+
+Get started with the default example of a textarea component below.
+
+```svelte example
+{#include Disabled.svelte}
+```
+
 ## Clearable
 
 ```svelte example