odj-svelte-ui 0.1.0 → 0.2.0

package/dist/forms/input/Input.svelte

@@ -4,7 +4,7 @@
   import { CloseButton } from "../..";
   import { type InputProps as Props, input, clampSize, type InputValue } from ".";
 
-  let { children, left, right, value = $bindable<InputValue>(), clearable = false, size, color = "default", class: className, classLeft, classRight, divClass, ...restProps }: Props<InputValue> = $props();
+  let { children, left, right, value = $bindable<InputValue>(), clearable = false, size, color = "default", class: className, classLeft, classRight, divClass, classSearchInputXButton, ...restProps }: Props<InputValue> = $props();
 
   // tinted if put in component having its own background
   let background: boolean = getContext("background");
@@ -14,13 +14,39 @@
   let _size = $derived(size || clampSize(group?.size) || "md");
   const _color = $derived(color === "default" && background ? "tinted" : color);
 
-  const { base, input: inputCls, left: leftCls, right: rightCls } = $derived(input({ size: _size, color: _color, group: isGroup, class: className }));
+  const { base, input: inputCls, left: leftCls, right: rightCls, searchInputXButton } = $derived(input({ size: _size, color: _color, group: isGroup, class: className }));
 
   const clearAll = () => {
     value = undefined;
   };
+  
+  let colorForSearchInputXButton:string = $state('');
+  let referenceToGetColorID = 'getColor-' + crypto.randomUUID();
+  $effect(() => {
+    color;
+    const el = document.querySelector("#" + referenceToGetColorID);
+    if (el) {
+      const computedColor = getComputedStyle(el).color;
+      colorForSearchInputXButton = computedColor;
+    }
+  });
 </script>
 
+{#if restProps.type === 'search'}
+  <span class={searchInputXButton({ class: classSearchInputXButton })} id={referenceToGetColorID}></span>
+{/if}
+
+<style>
+  [type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    background-color: var(--color);
+    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
+    background-size: 20px 20px;
+    height: 20px;
+    width: 20px;
+  }
+</style>
+
 {#snippet inputContent()}
   {#if left}
     <div class={leftCls({ class: classLeft })}>
@@ -30,7 +56,7 @@
   {#if children}
     {@render children({ ...restProps, class: inputCls() })}
   {:else}
-    <input {...restProps} bind:value class={inputCls({ class: className })} />
+    <input {...restProps} style="--color: {colorForSearchInputXButton};" bind:value class={inputCls({ class: className })} />
   {/if}
   {#if right}
     <div class={rightCls({ class: classRight })}>

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

@@ -13,69 +13,91 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     color: {
         default: {
             input: string;
+            searchInputXButton: string;
         };
         tinted: {
             input: string;
+            searchInputXButton: string;
         };
         primary: {
             input: string;
+            searchInputXButton: string;
         };
         secondary: {
             input: string;
+            searchInputXButton: string;
         };
         green: {
             input: string;
+            searchInputXButton: string;
         };
         emerald: {
             input: string;
+            searchInputXButton: string;
         };
         red: {
             input: string;
+            searchInputXButton: string;
         };
         blue: {
             input: string;
+            searchInputXButton: string;
         };
         yellow: {
             input: string;
+            searchInputXButton: string;
         };
         orange: {
             input: string;
+            searchInputXButton: string;
         };
         gray: {
             input: string;
+            searchInputXButton: string;
         };
         teal: {
             input: string;
+            searchInputXButton: string;
         };
         cyan: {
             input: string;
+            searchInputXButton: string;
         };
         sky: {
             input: string;
+            searchInputXButton: string;
         };
         indigo: {
             input: string;
+            searchInputXButton: string;
         };
         lime: {
             input: string;
+            searchInputXButton: string;
         };
         amber: {
             input: string;
+            searchInputXButton: string;
         };
         violet: {
             input: string;
+            searchInputXButton: string;
         };
         purple: {
             input: string;
+            searchInputXButton: string;
         };
         fuchsia: {
             input: string;
+            searchInputXButton: string;
         };
         pink: {
             input: string;
+            searchInputXButton: string;
         };
         rose: {
             input: string;
+            searchInputXButton: string;
         };
     };
     group: {
@@ -91,6 +113,7 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     input: string;
     left: string;
     right: string;
+    searchInputXButton: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<{
     size: {
         sm: {
@@ -106,69 +129,91 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     color: {
         default: {
             input: string;
+            searchInputXButton: string;
         };
         tinted: {
             input: string;
+            searchInputXButton: string;
         };
         primary: {
             input: string;
+            searchInputXButton: string;
         };
         secondary: {
             input: string;
+            searchInputXButton: string;
         };
         green: {
             input: string;
+            searchInputXButton: string;
         };
         emerald: {
             input: string;
+            searchInputXButton: string;
         };
         red: {
             input: string;
+            searchInputXButton: string;
         };
         blue: {
             input: string;
+            searchInputXButton: string;
         };
         yellow: {
             input: string;
+            searchInputXButton: string;
         };
         orange: {
             input: string;
+            searchInputXButton: string;
         };
         gray: {
             input: string;
+            searchInputXButton: string;
         };
         teal: {
             input: string;
+            searchInputXButton: string;
         };
         cyan: {
             input: string;
+            searchInputXButton: string;
         };
         sky: {
             input: string;
+            searchInputXButton: string;
         };
         indigo: {
             input: string;
+            searchInputXButton: string;
         };
         lime: {
             input: string;
+            searchInputXButton: string;
         };
         amber: {
             input: string;
+            searchInputXButton: string;
         };
         violet: {
             input: string;
+            searchInputXButton: string;
         };
         purple: {
             input: string;
+            searchInputXButton: string;
         };
         fuchsia: {
             input: string;
+            searchInputXButton: string;
         };
         pink: {
             input: string;
+            searchInputXButton: string;
         };
         rose: {
             input: string;
+            searchInputXButton: string;
         };
     };
     group: {
@@ -194,69 +239,91 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     color: {
         default: {
             input: string;
+            searchInputXButton: string;
         };
         tinted: {
             input: string;
+            searchInputXButton: string;
         };
         primary: {
             input: string;
+            searchInputXButton: string;
         };
         secondary: {
             input: string;
+            searchInputXButton: string;
         };
         green: {
             input: string;
+            searchInputXButton: string;
         };
         emerald: {
             input: string;
+            searchInputXButton: string;
         };
         red: {
             input: string;
+            searchInputXButton: string;
         };
         blue: {
             input: string;
+            searchInputXButton: string;
         };
         yellow: {
             input: string;
+            searchInputXButton: string;
         };
         orange: {
             input: string;
+            searchInputXButton: string;
         };
         gray: {
             input: string;
+            searchInputXButton: string;
         };
         teal: {
             input: string;
+            searchInputXButton: string;
         };
         cyan: {
             input: string;
+            searchInputXButton: string;
         };
         sky: {
             input: string;
+            searchInputXButton: string;
         };
         indigo: {
             input: string;
+            searchInputXButton: string;
         };
         lime: {
             input: string;
+            searchInputXButton: string;
         };
         amber: {
             input: string;
+            searchInputXButton: string;
         };
         violet: {
             input: string;
+            searchInputXButton: string;
         };
         purple: {
             input: string;
+            searchInputXButton: string;
         };
         fuchsia: {
             input: string;
+            searchInputXButton: string;
         };
         pink: {
             input: string;
+            searchInputXButton: string;
         };
         rose: {
             input: string;
+            searchInputXButton: string;
         };
     };
     group: {
@@ -282,69 +349,91 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     color: {
         default: {
             input: string;
+            searchInputXButton: string;
         };
         tinted: {
             input: string;
+            searchInputXButton: string;
         };
         primary: {
             input: string;
+            searchInputXButton: string;
         };
         secondary: {
             input: string;
+            searchInputXButton: string;
         };
         green: {
             input: string;
+            searchInputXButton: string;
         };
         emerald: {
             input: string;
+            searchInputXButton: string;
         };
         red: {
             input: string;
+            searchInputXButton: string;
         };
         blue: {
             input: string;
+            searchInputXButton: string;
         };
         yellow: {
             input: string;
+            searchInputXButton: string;
         };
         orange: {
             input: string;
+            searchInputXButton: string;
         };
         gray: {
             input: string;
+            searchInputXButton: string;
         };
         teal: {
             input: string;
+            searchInputXButton: string;
         };
         cyan: {
             input: string;
+            searchInputXButton: string;
         };
         sky: {
             input: string;
+            searchInputXButton: string;
         };
         indigo: {
             input: string;
+            searchInputXButton: string;
         };
         lime: {
             input: string;
+            searchInputXButton: string;
         };
         amber: {
             input: string;
+            searchInputXButton: string;
         };
         violet: {
             input: string;
+            searchInputXButton: string;
         };
         purple: {
             input: string;
+            searchInputXButton: string;
         };
         fuchsia: {
             input: string;
+            searchInputXButton: string;
         };
         pink: {
             input: string;
+            searchInputXButton: string;
         };
         rose: {
             input: string;
+            searchInputXButton: string;
         };
     };
     group: {
@@ -360,6 +449,7 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     input: string;
     left: string;
     right: string;
+    searchInputXButton: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
@@ -375,69 +465,91 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     color: {
         default: {
             input: string;
+            searchInputXButton: string;
         };
         tinted: {
             input: string;
+            searchInputXButton: string;
         };
         primary: {
             input: string;
+            searchInputXButton: string;
         };
         secondary: {
             input: string;
+            searchInputXButton: string;
         };
         green: {
             input: string;
+            searchInputXButton: string;
         };
         emerald: {
             input: string;
+            searchInputXButton: string;
         };
         red: {
             input: string;
+            searchInputXButton: string;
         };
         blue: {
             input: string;
+            searchInputXButton: string;
         };
         yellow: {
             input: string;
+            searchInputXButton: string;
         };
         orange: {
             input: string;
+            searchInputXButton: string;
         };
         gray: {
             input: string;
+            searchInputXButton: string;
         };
         teal: {
             input: string;
+            searchInputXButton: string;
         };
         cyan: {
             input: string;
+            searchInputXButton: string;
         };
         sky: {
             input: string;
+            searchInputXButton: string;
         };
         indigo: {
             input: string;
+            searchInputXButton: string;
         };
         lime: {
             input: string;
+            searchInputXButton: string;
         };
         amber: {
             input: string;
+            searchInputXButton: string;
         };
         violet: {
             input: string;
+            searchInputXButton: string;
         };
         purple: {
             input: string;
+            searchInputXButton: string;
         };
         fuchsia: {
             input: string;
+            searchInputXButton: string;
         };
         pink: {
             input: string;
+            searchInputXButton: string;
         };
         rose: {
             input: string;
+            searchInputXButton: string;
         };
     };
     group: {
@@ -453,6 +565,7 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     input: string;
     left: string;
     right: string;
+    searchInputXButton: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<{
     size: {
         sm: {
@@ -468,69 +581,91 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     color: {
         default: {
             input: string;
+            searchInputXButton: string;
         };
         tinted: {
             input: string;
+            searchInputXButton: string;
         };
         primary: {
             input: string;
+            searchInputXButton: string;
         };
         secondary: {
             input: string;
+            searchInputXButton: string;
         };
         green: {
             input: string;
+            searchInputXButton: string;
         };
         emerald: {
             input: string;
+            searchInputXButton: string;
         };
         red: {
             input: string;
+            searchInputXButton: string;
         };
         blue: {
             input: string;
+            searchInputXButton: string;
         };
         yellow: {
             input: string;
+            searchInputXButton: string;
         };
         orange: {
             input: string;
+            searchInputXButton: string;
         };
         gray: {
             input: string;
+            searchInputXButton: string;
         };
         teal: {
             input: string;
+            searchInputXButton: string;
         };
         cyan: {
             input: string;
+            searchInputXButton: string;
         };
         sky: {
             input: string;
+            searchInputXButton: string;
         };
         indigo: {
             input: string;
+            searchInputXButton: string;
         };
         lime: {
             input: string;
+            searchInputXButton: string;
         };
         amber: {
             input: string;
+            searchInputXButton: string;
         };
         violet: {
             input: string;
+            searchInputXButton: string;
         };
         purple: {
             input: string;
+            searchInputXButton: string;
         };
         fuchsia: {
             input: string;
+            searchInputXButton: string;
         };
         pink: {
             input: string;
+            searchInputXButton: string;
         };
         rose: {
             input: string;
+            searchInputXButton: string;
         };
     };
     group: {
@@ -556,69 +691,91 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     color: {
         default: {
             input: string;
+            searchInputXButton: string;
         };
         tinted: {
             input: string;
+            searchInputXButton: string;
         };
         primary: {
             input: string;
+            searchInputXButton: string;
         };
         secondary: {
             input: string;
+            searchInputXButton: string;
         };
         green: {
             input: string;
+            searchInputXButton: string;
         };
         emerald: {
             input: string;
+            searchInputXButton: string;
         };
         red: {
             input: string;
+            searchInputXButton: string;
         };
         blue: {
             input: string;
+            searchInputXButton: string;
         };
         yellow: {
             input: string;
+            searchInputXButton: string;
         };
         orange: {
             input: string;
+            searchInputXButton: string;
         };
         gray: {
             input: string;
+            searchInputXButton: string;
         };
         teal: {
             input: string;
+            searchInputXButton: string;
         };
         cyan: {
             input: string;
+            searchInputXButton: string;
         };
         sky: {
             input: string;
+            searchInputXButton: string;
         };
         indigo: {
             input: string;
+            searchInputXButton: string;
         };
         lime: {
             input: string;
+            searchInputXButton: string;
         };
         amber: {
             input: string;
+            searchInputXButton: string;
         };
         violet: {
             input: string;
+            searchInputXButton: string;
         };
         purple: {
             input: string;
+            searchInputXButton: string;
         };
         fuchsia: {
             input: string;
+            searchInputXButton: string;
         };
         pink: {
             input: string;
+            searchInputXButton: string;
         };
         rose: {
             input: string;
+            searchInputXButton: string;
         };
     };
     group: {