fix: docs: search-input class to inputClass

Author: shinokada

src/lib/forms/phoneinput/PhoneInput.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Input } from "$lib";
+  import { type PhoneInputProps } from "$lib/types";
+
+  let { children, pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}", phoneType = "default", floatingLabel = "Phone number", ...restProps }: PhoneInputProps = $props();
+</script>
+
+{#if phoneType === "default" }
+<div class="relative">
+  <div class="absolute inset-y-0 start-0 top-0 flex items-center ps-3.5 pointer-events-none">
+      <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18">
+          <path d="M18 13.446a3.02 3.02 0 0 0-.946-1.985l-1.4-1.4a3.054 3.054 0 0 0-4.218 0l-.7.7a.983.983 0 0 1-1.39 0l-2.1-2.1a.983.983 0 0 1 0-1.389l.7-.7a2.98 2.98 0 0 0 0-4.217l-1.4-1.4a2.824 2.824 0 0 0-4.218 0c-3.619 3.619-3 8.229 1.752 12.979C6.785 16.639 9.45 18 11.912 18a7.175 7.175 0 0 0 5.139-2.325A2.9 2.9 0 0 0 18 13.446Z"/>
+      </svg>
+  </div>
+  <input type="text" {pattern} {...restProps} class="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 ps-10 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"/>
+</div>
+{:else if phoneType === "floating"}
+<div class="relative">
+  <span class="absolute start-0 bottom-3 text-gray-500 dark:text-gray-400">
+    <svg class="w-4 h-4 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18">
+        <path d="M18 13.446a3.02 3.02 0 0 0-.946-1.985l-1.4-1.4a3.054 3.054 0 0 0-4.218 0l-.7.7a.983.983 0 0 1-1.39 0l-2.1-2.1a.983.983 0 0 1 0-1.389l.7-.7a2.98 2.98 0 0 0 0-4.217l-1.4-1.4a2.824 2.824 0 0 0-4.218 0c-3.619 3.619-3 8.229 1.752 12.979C6.785 16.639 9.45 18 11.912 18a7.175 7.175 0 0 0 5.139-2.325A2.9 2.9 0 0 0 18 13.446Z"/>
+    </svg>
+  </span>
+  <input type="text" class="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" {pattern} {...restProps}/>
+    <label for="floating-phone-number" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 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">{floatingLabel}</label>
+  </div>
+
+
+{/if}

src/lib/forms/phoneinput/index.ts

@@ -0,0 +1 @@
+export { default as PhoneInput } from "./PhoneInput.svelte"

src/lib/index.ts

@@ -54,6 +54,7 @@ export * from "./forms/helper";
 export * from "./forms/input-field";
 export * from "./forms/input-addon";
 export * from "./forms/label";
+export * from "./forms/phoneinput";
 export * from "./forms/select";
 export * from "./forms/radio";
 export * from "./forms/range";

src/lib/types.ts

@@ -800,6 +800,13 @@ export interface InputAddonProps extends HTMLAttributes<HTMLDivElement> {
   size?: "sm" | "md" | "lg";
 }
 
+// phoneInput
+export interface PhoneInputProps<T extends InputValue = number> extends Omit<HTMLInputAttributes, "size" | "children" | "value"> {
+  phoneType?: "default" | "floating" | "countryCode" | "copy" | "advanced";
+  children?: Snippet;
+  floatingLabel?: string;
+}
+
 // label
 export interface LabelProps extends HTMLLabelAttributes {
   children: Snippet;

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

@@ -75,8 +75,9 @@ Use the simplest form of a search input component with an icon and a search butt
 </script>
 
 <form id="example-form">
-  <Search bind:value={elementTxt} bind:elementRef={searchRef} class="my-4" />
+  <Search bind:value={elementTxt} bind:elementRef={searchRef} />
   <Button
+    class="mt-2"
     onclick={() => {
       searchRef?.setRangeText("ALREADY", 14, 17, "select");
       searchRef?.select();
@@ -136,7 +137,7 @@ Use this search component with a dropdown to let your users select a category in
       {/each}
     </Dropdown>
   </div>
-  <Search size="lg" class="rounded-none py-2.5" placeholder="Search Mockups, Logos, Design Templates..." />
+  <Search size="lg" inputClass="rounded-none py-2.5" placeholder="Search Mockups, Logos, Design Templates..." />
   <Button class="rounded-s-none p-2!">
     <SearchOutline class="h-6 w-6" />
   </Button>
@@ -201,7 +202,7 @@ Use this example where you can select a country in which you want to search for
       {/each}
     </Dropdown>
   </div>
-  <Search size="lg" class="rounded-none py-2.5" placeholder="Search Mockups, Logos, Design Templates..." />
+  <Search size="lg" inputClass="rounded-none py-2.5" placeholder="Search Mockups, Logos, Design Templates..." />
   <Button class="rounded-s-none p-2!">
     <SearchOutline class="h-6 w-6" />
   </Button>
@@ -222,7 +223,7 @@ Get started with this example if you would like to enable voice search for your
 </script>
 
 <form class="flex gap-2">
-  <Search hideClear size="lg" class="flex items-center gap-2" placeholder="Search Mockups, Logos, Design Templates...">
+  <Search hideClear size="lg" inputClass="flex items-center gap-2" placeholder="Search Mockups, Logos, Design Templates...">
     <button type="button" onclick={handleVoiceBtn} class="outline-hidden">
       <MicrophoneSolid class="me-2 h-5 w-5" />
     </button>