@novie/ui 1.0.3 → 1.0.4

package/dist/index.js

@@ -5059,10 +5059,10 @@ function gi({ className: e, inputSize: t = "sm", clearable: n = !0, onClear: r,
 	}, b = String(_).length > 0, x = n && b && !c && !s, S = s && !c;
 	return /* @__PURE__ */ a("div", {
 		"data-slot": "search-input",
-		className: w("flex items-center gap-2 rounded-full border border-input bg-background px-3", "transition-colors", t === "sm" && "h-8", t === "default" && "h-10", c && "cursor-not-allowed bg-secondary opacity-60", e),
+		className: w("flex w-80 max-w-full items-center gap-2 rounded-full border border-transparent bg-background px-2", "transition-colors focus-within:border-input", (b || S) && "border-input", t === "sm" && "h-8", t === "default" && "h-10", t === "default" && "pl-3", c && "cursor-not-allowed border-transparent bg-interactive-disabled", e),
 		children: [
 			/* @__PURE__ */ i("span", {
-				className: w("inline-flex shrink-0 [&_svg]:h-[18px] [&_svg]:w-[18px]", c ? "text-muted-foreground/50" : "text-muted-foreground"),
+				className: "inline-flex size-[22.8px] shrink-0 items-center justify-center text-foreground [&_svg]:h-[16.8px] [&_svg]:w-[16.8px]",
 				children: /* @__PURE__ */ i(ye, {})
 			}),
 			/* @__PURE__ */ i(On, {
@@ -5071,20 +5071,24 @@ function gi({ className: e, inputSize: t = "sm", clearable: n = !0, onClear: r,
 				value: _,
 				onChange: v,
 				placeholder: f,
-				className: w("h-full border-0 bg-transparent px-0 text-[18px] leading-7 shadow-none ring-0 ring-offset-0", "focus-visible:shadow-none focus-visible:ring-0 focus-visible:ring-offset-0", "placeholder:text-muted-foreground", "text-foreground", "[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden"),
+				className: w("h-5 min-w-0 flex-1 border-0 bg-transparent px-0 py-0 text-input-text text-foreground shadow-none ring-0 ring-offset-0", "focus-visible:shadow-none focus-visible:ring-0 focus-visible:ring-offset-0", "placeholder:text-[hsl(var(--text-primary-secondary))] focus:placeholder:text-foreground", "disabled:text-[hsl(var(--text-primary-tertiary))] disabled:placeholder:text-[hsl(var(--text-primary-tertiary))] disabled:opacity-100", "[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden"),
 				...p
 			}),
 			S && /* @__PURE__ */ i("span", {
-				className: "inline-flex shrink-0 animate-spin text-muted-foreground [&_svg]:h-4 [&_svg]:w-4",
+				className: "inline-flex size-6 shrink-0 animate-spin items-center justify-center text-foreground [&_svg]:h-6 [&_svg]:w-6",
 				children: /* @__PURE__ */ i(Qt, {})
 			}),
-			x && /* @__PURE__ */ i("button", {
+			x && /* @__PURE__ */ a("button", {
 				type: "button",
+				"data-slot": "search-input-clear",
 				onClick: y,
 				disabled: c,
-				className: w("inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-full disabled:pointer-events-none disabled:cursor-not-allowed", "bg-foreground/5 text-muted-foreground transition-colors hover:bg-foreground/10 hover:text-foreground", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"),
+				className: w("relative inline-flex h-6 w-6 shrink-0 cursor-pointer appearance-none items-center justify-center overflow-hidden rounded-full disabled:pointer-events-none disabled:cursor-not-allowed", "text-foreground transition-colors hover:text-foreground", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"),
 				"aria-label": "Clear search",
-				children: /* @__PURE__ */ i(re, { className: "h-3.5 w-3.5" })
+				children: [/* @__PURE__ */ i("span", {
+					"data-slot": "search-input-clear-background",
+					className: "absolute inset-0 rounded-full bg-muted transition-opacity"
+				}), /* @__PURE__ */ i(re, { className: "relative h-4 w-4" })]
 			})
 		]
 	});