diff --git a/.changeset/dirty-cobras-carry.md b/.changeset/dirty-cobras-carry.md new file mode 100644 index 0000000000..da23cbbb03 --- /dev/null +++ b/.changeset/dirty-cobras-carry.md @@ -0,0 +1,7 @@ +--- +"@heroui/date-input": patch +"@heroui/input-otp": patch +"@heroui/theme": patch +--- + +fixed inconsistent isInvalid styling between Input, InputOtp and DateInput in faded variant (#5339) diff --git a/packages/components/date-input/package.json b/packages/components/date-input/package.json index c367f068bd..b48be1231f 100644 --- a/packages/components/date-input/package.json +++ b/packages/components/date-input/package.json @@ -35,7 +35,7 @@ }, "peerDependencies": { "@heroui/system": ">=2.4.10", - "@heroui/theme": ">=2.4.9", + "@heroui/theme": ">=2.4.16", "react": ">=18 || >=19.0.0-rc.0", "react-dom": ">=18 || >=19.0.0-rc.0" }, diff --git a/packages/components/input-otp/package.json b/packages/components/input-otp/package.json index 0fcd87b44c..fe224488e2 100644 --- a/packages/components/input-otp/package.json +++ b/packages/components/input-otp/package.json @@ -36,7 +36,7 @@ "peerDependencies": { "react": ">=18", "react-dom": ">=18", - "@heroui/theme": ">=2.4.13", + "@heroui/theme": ">=2.4.16", "@heroui/system": ">=2.4.7" }, "dependencies": { diff --git a/packages/core/theme/src/components/date-input.ts b/packages/core/theme/src/components/date-input.ts index 3f43bbc1ab..385a76d2e8 100644 --- a/packages/core/theme/src/components/date-input.ts +++ b/packages/core/theme/src/components/date-input.ts @@ -60,10 +60,6 @@ const dateInput = tv({ "border-medium", "border-default-200", "hover:border-default-400", - // isInvalid=true - "group-data-[invalid=true]:bg-danger-50", - "group-data-[invalid=true]:hover:bg-danger-100", - "group-data-[invalid=true]:focus-within:hover:bg-danger-50", ], }, bordered: { diff --git a/packages/core/theme/src/components/input-otp.ts b/packages/core/theme/src/components/input-otp.ts index 189548373e..4aa7ed1f8e 100644 --- a/packages/core/theme/src/components/input-otp.ts +++ b/packages/core/theme/src/components/input-otp.ts @@ -409,12 +409,7 @@ const inputOtp = tv({ variant: "faded", isInvalid: true, class: { - segment: [ - "bg-danger-50", - "text-danger", - "border-danger-200", - "data-[active=true]:border-danger-400", - ], + segment: ["text-danger"], caret: ["bg-danger"], }, },